CSS3中的nth是一個非常強大的選擇器,可以根據元素在父元素中的位置來選擇元素,簡單來說就是根據元素的序列選中元素。
nth選擇器可以有兩個參數,分別為an+b和even/odd。an+b的意思是從第一個元素開始,每隔an+b個元素選擇一個元素,例如nth-child(2n+1)表示選擇每隔2個元素后的第一個元素,也就是奇數元素。如果我們想要選中第一個元素,可以使用nth-child(1),也可以直接寫成:first-child。如果要選中最后一個元素,可以使用:last-child。
除了an+b選擇器之外,還有even和odd選擇器,even表示選中偶數元素,odd表示選中奇數元素,例如:nth-child(even)表示選中偶數元素,即第2、4、6、8個元素。
/* 選中第2、4、6個li元素 */ li:nth-child(2n) { color: red; } /* 選中第1個li元素 */ li:nth-child(1) { color: blue; } /* 選中最后一個li元素 */ li:last-child { color: green; } /* 選中偶數li元素 */ li:nth-child(even) { background-color: yellow; }
需要注意的是,在使用nth選擇器時,要確保所有的元素是同一級別的,否則nth選擇器將無法選擇到元素。此外,nth選擇器也可以配合其他選擇器一起使用,例如在選擇器的后面加上一個class選擇器,就可以選中特定的元素。