CSS3的nth child 選擇器

2021-08-21 05:32:01 字數 900 閱讀 7092

nth-child()瀏覽器支援

ie9及以上版本，火狐，谷歌，safari ，opera都支援！
:nth-child(n) 選擇器匹配屬於其父元素的第 n個子元素，不論元素的型別。

p


:nth-child(2)


/*將匹配body的第二個元素*/
不要把:nth-child() 和:nth-of-type()混淆。

css3 :nth-of-type() 選擇器的意思是「規定屬於其父元素的第二個 p 元素」

奇偶數匹配

tr:nth-child(odd) 與 tr:nth-child(even)


或者tr:nth-of-type(odd) tr:nth-of-type(even)
分別匹配序號為奇數與偶數的元素。奇數(odd)與(2n+1)結果一樣；偶數(even)與(2n+0)及(2n)結果一樣。

倍數寫法

:nth-child(an) 【:nth-of-type(an)同理，不解釋】

匹配所有倍數為a的元素。其中引數an中的字母n不可預設，它是倍數寫法的標誌，如3n、5n。

li:nth-child(3n)/*把第3、第6、第9、…、所有3的倍數的li的背景設為橙色
延伸

:nth-child(2n+1)， :nth-child(2n-3) ， :nth-child(4n+3) ，還可以 :nth-child(-an+b)也就是反向匹配。

css3 選擇器 nth child 選擇問題

nth child 是乙個偽類選擇器，它並不會按照標籤的順序進行選擇，而是按照順序進行選擇 例子 doctype html p nth child 8 先根據順序選擇第8行，在檢查它是否是p元素，如果是p就是紅色，父元素是body style head 這是標題 h1 1第乙個段落。p 2第二個段落...

CSS3的nth child選擇器的使用

first child first of type last of type only of type only child nth child n nth last child n nth of type n nth last of type n last child nth child研究開始 ...

CSS3偽類選擇器 nth child

css3偽類選擇器 nth child css3標準已提出數年，但是目前能實現她的瀏覽器並不多，雖然部分瀏覽器能實現部分規範，但這又有什麼用呢？面對更多的相容性問題，今天我們就來 前瞻 一下css3的乙個偽類選擇器 nth child css3的強大，讓人驚嘆，人們在驚喜之餘，又不得不為其艱難的道路...