CSS3 :nth-child()選擇器用于選擇指定父元素下的特定位置的子元素。它允許你根據位置選擇子元素,并且可以與其他選擇器組合使用。
該選擇器使用一個參數n來匹配位置,可以是一個具體的數字,也可以是關鍵字odd(奇數)或even(偶數)。它選擇父元素下所有滿足條件的子元素。
例如,使用:nth-child(2n)選擇器可以選擇父元素下索引為偶數的子元素,而:nth-child(2n+1)選擇器可以選擇索引為奇數的子元素。
下面是一些:nth-child()選擇器的示例:
:nth-child(1) - 選擇父元素下的第一個子元素
:nth-child(2n) - 選擇父元素下的偶數位置的子元素
:nth-child(2n+1) - 選擇父元素下的奇數位置的子元素
:nth-child(3n+1) - 選擇父元素下每3個子元素中的第一個子元素
:nth-child(odd) - 選擇父元素下的奇數位置的子元素
:nth-child(even) - 選擇父元素下的偶數位置的子元素
使用:nth-child()選擇器可以實現一些常見的樣式需求,例如在表格中隔行變色、選擇特定位置的元素等。它是CSS3中非常有用的選擇器之一。