CSS:nth-child選擇器用法練習


:nth-child()選擇器,選擇器選取父元素的第 N 個子元素,與類型無關。

:nth-child(n)

選擇器匹配屬於其父元素的第 N 個子元素,不論元素的類型。n 可以是數字、關鍵詞或公式。

:nth-child (an + b)

描述:表示周期的長度,n 是計數器(從 0 開始),b 是偏移值。

 

與之相似的選擇器有 :nth-of-type(n)  選擇器匹配屬於父元素的特定類型的第 N 個子元素的每個元素。用法和:nth-child()相同。

例如 :p:nth-of-type(3) 選取類型p的第3個子元素。

 

利用:nth-child()選擇器可以選擇相應的標簽進行樣式添加,可以不用給標簽添加ID和Class,以下是常用的例子:

1、:nth-child(5)  選取第五個標簽

2、:nth-child(n+3)  選取大於等於3的標簽

3、:nth-child(-n+3)  選取小於等於3的標簽

4、:nth-child(2n)  選取偶數標簽,等同於:nth-child(even)

5、:nth-child(2n-1)  選取奇數標簽,等同於:nth-child(odd)

6、:nth-child(3n+1) 每隔兩個元素選取一個

7、:last-child  選取倒數第一個

8、:nth-last-child(3)  選取倒數第三個


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM