淚目了！CSS nth-child偽類終於支援了of關鍵詞

XboxYan發表於2023-04-11
CSS
歡迎關注我的公眾號：前端偵探

介紹一個關於CSS :nth-child 選擇器的新特性。

不知道大家有沒有碰到過這樣的問題或者需求，從一個特殊的、不可更改的HTML結構中選擇出你想要的元素，比如

<h1 class="h1">標題1</h1>
<h1 class="h2">標題2</h1>
<p class="p1">段落1</p>
<p class="p1">段落1</p>
<p class="p2">段落2</p>
<p class="p2">段落2</p><!--想選中這個-->
<p class="p2">段落2</p>
<p class="p3">段落3</p>

請問，如何選擇第2個.p2標籤，如下

image.png

如果不借助 JS，好像並不是很容易？今天一起來探討這樣一個問題

一、nth-child 和 nth-of-type

選擇第幾個元素可以想到nth-child和nth-of-type。

這兩個的區別是，nth-child代表的是第幾個子元素，而nth-of-type代表的是該標籤型別的第幾個元素。

直接看例子吧

:nth-child(2){
  color: red
}

選中第2個元素

image.png

然後是nth-of-type

:nth-of-type(2){
  color: red
}

選擇每種元素（h1元素和p元素）的第2個

image.png

如果限制一下類名，是不是好像可以實現我們想要的效果？

.p2:nth-of-type(2){
  color: red
}

結果...什麼都沒選中

image.png

為什麼會這樣呢？其實.p2:nth-of-type(2)可以拆分為:nth-of-type(2)和.p2。

:nth-of-type(2)可以選中每種元素的第2個，也就是.h2和.p1，再結合.p2選擇器，注意，這裡是“且”的關係，由於兩者沒有同時滿足的，所以什麼都沒選中，示意如下

image-20230408135349604

好像並不是我們想象的那樣？那有沒有辦法在所有的.p中再選擇第2個呢？

二、nth-child 中的 of 關鍵詞

沒錯，of 關鍵詞就是為了實現這樣的功能而產生的，或者說是彌補了nth-child和nth-of-type的不足。

:nth-child() takes a single argument that describes a pattern for matching element indices in a list of siblings. Element indices are 1-based.

通俗意思就是先透過 of 後面的選擇器篩選元素，然後再匹配第幾個

:nth-child(<nth> [of <complex-selector-list>]?) {
  /* ... */
}

比如要實現選擇第2個.p2，可以直接這樣實現

:nth-child(2 of .p2){
  color: red
}

效果如下，剛好是第2個.p2

image.png

原理是這樣的

image.png

是不是非常容易？

三、還可以更靈活

現在在原先的 dom 中插入其他干擾元素，比如這樣的

<h1 class="h1">標題1</h1>
<p class="p1">段落1</p>
<p class="p1">段落1</p>
<p class="p2">段落2</p>
<p class="p3">段落3</p>
<h2 class="p2">標題段落2</h2>
<p class="p2">段落2</p><!--想選中這個-->
<p class="p3">段落3</p>

那麼，現在如何選擇第2個.p2並且標籤為p的元素呢？

image.png

如果用of關鍵詞，可以很輕鬆的實現，只不過需要注意篩選條件p.p2

:nth-child(2 of p.p2){
  color: red
}

這樣就會跳過h2.p2元素，如下

image.png

後面只要是合法的選擇器即可！

四、相容性和總結

其實這個關鍵詞早在 2015 年就已經在Safari上支援了（Safari終於雄起了一回），但直到最近才在Chrome 111上正式支援，足足落後了 8 年啊，如下

image.png

其實沒什麼好總結的，只需要記住一點，透過of可以提前篩選元素，然後在匹配第 N 個元素，彌補了nth-child和nth-of-type的不足。雖然目前還不能大規模使用，但是一些實驗專案或者Electron專案還是可以嘗試一下的。最後，如果覺得還不錯，對你有幫助的話，歡迎點贊、收藏、轉發❤❤❤

歡迎關注我的公眾號：前端偵探

相關文章