CSS3 :nth-child() 選擇器

實例

指定每個 p 元素匹配的父元素中第 2 個子元素的背景色：

p:nth-child(2) { background:#ff0000; }

定義和用法

:nth-child(n) 選擇器匹配父元素中的第 n 個子元素，元素類型沒有限制。

n 可以是一個數字，一個關鍵字，或者一個公式。

提示: 請參閱選擇器。該選擇器匹配同類型中的第 n 個同級兄弟元素。

瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器版本號。

選擇器

:nth-child()

4.0

9.0

3.5

3.2

9.6

更多實例

,

實例 1

奇數和偶數是可以作為關鍵字使用用于相匹配的子元素，其索引是奇數或偶數(該索引的第一個子節點是1)。 在這里，我們為奇數和偶數p元素指定兩個不同的背景顏色：

p:nth-child(odd) { background:#ff0000; } p:nth-child(even) {

background:#0000ff; }

,

實例 2

使用公式(an+ b).描述：a代表一個循環的大小，N是一個計數器(從0開始)，以及b是偏移量。 在這里，我們對所有索引是3的倍數的p元素指定了背景顏色：

p:nth-child(3n+0) { background:#ff0000; }

,

, '\n']

總結

以上是生活随笔為你收集整理的css的nth选择器,CSS3 :nth-child() 选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。