技術問答
技術文章
iT 徵才
Tag
聊天室
2024 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
第 11 屆 iThome 鐵人賽
DAY
27
1
自我挑戰組
CSS 大全(第四版)閱讀筆記
系列 第
27
篇
day27【主題六:選擇器】筆記2
11th鐵人賽
Amy
2019-09-28 09:22:37
574 瀏覽
分享至
一、選擇每間隔n個元素,:nth-child()
:nth-child(1) 相當於 :first-child
可使用an+b、an-b,兩種代數運算式
實務上常用於清除列圖文列表、面板清單的浮動,n等於一列要的個數 .class li:nth-child(3n+1){clear:left}
注意!n是從0開始,但是所有元素都是從1開始數
:nth-child(2n)表示所有偶數項子代元素(even)
:nth-child(2n+1)、:nth-child(2n-1)表示所有奇數項子代元素(odd)
:nth-last-child()是從兄弟元素列表的尾端往回數
兩個虛擬類別同樣也可以串接使用
使用nth-child時,會將子層中的所有標籤都會一起列號計算
二、每隔n的項目選擇相同類型元素,:nth-of-type()
:nth-of-type(1):nth-last-of-type(1)相當於:only-of-type,但有較高的權重
使用nth-of-type時,會只將子層中的特定選擇列號計算
三、第一個字母與第一行內容
第一個字母,::first-letter
第一行內容,::first-line
只適用於標題或斷落等區塊元素,不是超連結的行內顯示,能夠用的屬性也有所限制(p98)
留言
追蹤
檢舉
上一篇
day26【主題六:選擇器】筆記1
下一篇
day28【主題六:選擇器】筆記3-動態、介面狀態虛擬類別
系列文
CSS 大全(第四版)閱讀筆記
共
30
篇
目錄
RSS系列文
訂閱系列文
17
人訂閱
26
day26【主題六:選擇器】筆記1
27
day27【主題六:選擇器】筆記2
28
day28【主題六:選擇器】筆記3-動態、介面狀態虛擬類別
29
day29【主題七:邊界範圍】
30
day30【主題八:數值與單位】
完整目錄
直播研討會
{{ item.subject }}
{{ item.channelVendor }}
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友留言
立即登入留言
iThome鐵人賽
參賽組數
1064
組
團體組數
40
組
累計文章數
22201
篇
完賽人數
602
人
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
看更多
15th鐵人賽
16th鐵人賽
13th鐵人賽
14th鐵人賽
12th鐵人賽
11th鐵人賽
鐵人賽
2019鐵人賽
javascript
2018鐵人賽
python
2017鐵人賽
windows
php
c#
windows server
linux
css
react
vue.js
熱門問題
熟識南投軟體工程師推薦
如何練國考資訊題?
筆電無法使用usb開機重裝系統
CCNA相關問題詢問
電商在販售商品時,可以自行縮短保固期限嗎?
求救 有人會修改cookie權限嗎
python scrapy pipeline實作問題請教
防火牆互通問題
函數問題
桌面的使用者文件圖標壞掉
熱門回答
防火牆互通問題
筆電無法使用usb開機重裝系統
if函數中的>&<&=是否可以使用儲存格代替
開啟Microsoft Edge 瀏覽器無法開啟網頁,出現錯誤訊息
熟識南投軟體工程師推薦
熱門文章
每日一篇學習筆記 直到我做完專題 :( [Day1]
每日一篇學習筆記 直到我做完專題 :( [Day2]
[翻譯]使用AI工具寫程式碼時如何避免「AI幻覺」?
每日一篇學習筆記 直到我做完專題 :( [Day3]
每日一篇學習筆記 直到我做完專題 :( [Day4]
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}