CSS中的.nth偽類非常有用,它可以讓我們輕松地選擇文檔中的特定元素。常用的.nth語法是:
:nth-child(n) :nth-last-child(n) :nth-of-type(n) :nth-last-of-type(n)
其中n指定要選擇的元素的索引,可以是具體數(shù)字,也可以是關鍵詞,例如“odd”和“even”表示選擇奇數(shù)或偶數(shù)元素,或者“n+3”表示選擇從3開始的每個元素。
在.nth語法中,child和of-type的區(qū)別在于前者選擇匹配父元素下所有子元素,后者只選擇匹配具有相同類型的元素。例如:first-child選擇一個元素只要它是任何父元素的第一個子元素,而:nth-of-type(2)選擇第二個同類型的元素。
以下示例展示如何使用.nth語法選擇特定元素:
/*選擇第二個p元素*/ p:nth-child(2) { color: blue; } /*選擇偶數(shù)個p元素*/ p:nth-of-type(even) { background-color: lightgray; } /*選擇除第一個div外其他所有div元素*/ div:not(:first-of-type) { border: 1px solid black; }