CSS選擇器中,我們經常用到的是元素選擇器、類選擇器、ID選擇器等。
除了這些基本的選擇器外,CSS還提供了數組選擇器。數組選擇器可以選擇文檔中的某些元素,根據元素在一個父元素下的位置進行選擇。
數組選擇器同樣用于定位元素,只是其定位方式和基本選擇器不同。
下面是幾個常見的數組選擇器:
nth-child(n) nth-last-child(n) nth-of-type(n) nth-last-of-type(n)
其中,nth-child(n)選中的是元素在其父元素中的第n個子元素。
示例代碼: .parent div:nth-child(2){} /* 選中父元素為 .parent 的第二個 div 元素 */ .parent p:nth-child(odd){} /*選中父元素為 .parent 的奇數個 p 元素*/
而nth-last-child(n)選擇的則是元素在其父元素中的倒數第n個子元素。
示例代碼: .parent span:nth-last-child(2){} /* 選中父元素為 .parent 的倒數第二個 span 元素 */
nth-of-type(n)選擇的是同一種類型元素中的第n個元素。
示例代碼: .container >h2:nth-of-type(3){} /* 選中父元素為 .container 的第三個 h2 元素 */
而nth-last-of-type(n)選擇的則是同一種類型元素中的倒數第n個元素。
示例代碼: .container >p:nth-last-of-type(1){} /* 選中父元素為 .container 的最后一個 p 元素 */
數組選擇器的應用可以更加靈活地指定元素選擇范圍,是CSS選擇器中的重要組成部分。
下一篇css數量選擇框