CSS3中的nth屬性可以根據元素在其父元素中的位置進行選擇。
nth有兩個關鍵字:nth-child和nth-of-type。
nth-child表示選擇該元素在其父元素中的位置,無論它是什么類型的元素。
p:nth-child(3) { color: red; }
上面的例子將會變成第三個子元素的段落文本變成紅色,無論這個元素是什么類型的。
而nth-of-type則是選擇特定類型的元素在其父元素中的位置。
p:nth-of-type(3) { color: red; }
這個例子只會選擇第三個段落文本來變成紅色,無論在這些子元素中是否存在其他類型的元素。
可以在nth中使用具體的數字,也可以使用關鍵詞odd和even來選擇奇數和偶數元素。
p:nth-child(odd) { background-color: grey; } p:nth-of-type(even) { background-color: grey; }
上面的代碼將會選擇父元素中的奇數子元素和段落元素中的偶數位置,并將背景顏色設置為灰色。