介紹一個(gè)關(guān)于CSS  :nth-child 選擇器的新特性。

不知道大家有沒(méi)有碰到過(guò)這樣的問(wèn)題或者需求，從一個(gè)特殊的、不可更改的??HTML??結(jié)構(gòu)中選擇出你想要的元素，比如

<h1 class="h1">標(biāo)題1</h1>
<h1 class="h2">標(biāo)題2</h1>
<p class="p1">段落1</p>
<p class="p1">段落1</p>
<p class="p2">段落2</p>
<p class="p2">段落2</p><!--想選中這個(gè)-->
<p class="p2">段落2</p>
<p class="p3">段落3</p>

請(qǐng)問(wèn)，如何選擇第2個(gè).p2標(biāo)簽，如下：

如果不借助 JS，好像并不是很容易？今天一起來(lái)探討這樣一個(gè)問(wèn)題

一、nth-child 和 nth-of-type

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

這兩個(gè)的區(qū)別是，nth-child?代表的是第幾個(gè)子元素，而nth-of-type代表的是該標(biāo)簽類型的第幾個(gè)元素。

直接看例子吧。

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

選中第2個(gè)元素。

然后是nth-of-type。

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

選擇每種元素（h1元素和p元素）的第2個(gè)。

如果限制一下類名，是不是好像可以實(shí)現(xiàn)我們想要的效果？

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

結(jié)果...什么都沒(méi)選中。

為什么會(huì)這樣呢？其實(shí).p2:nth-of-type(2)?可以拆分為:nth-of-type(2)和.p2。

:nth-of-type(2)?可以選中每種元素的第2個(gè)，也就是.h2和.p1?，再結(jié)合.p2選擇器，注意，這里是“且”的關(guān)系，由于兩者沒(méi)有同時(shí)滿足的，所以什么都沒(méi)選中，示意如下：

好像并不是我們想象的那樣？那有沒(méi)有辦法在所有的.p中再選擇第2個(gè)呢？

二、nth-child 中的 of 關(guān)鍵詞

沒(méi)錯(cuò)，of 關(guān)鍵詞就是為了實(shí)現(xiàn)這樣的功能而產(chǎn)生的，或者說(shuō)是彌補(bǔ)了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.

通俗意思就是先通過(guò) of 后面的選擇器篩選元素，然后再匹配第幾個(gè)。

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

比如要實(shí)現(xiàn)選擇第2個(gè).p2，可以直接這樣實(shí)現(xiàn)。

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

效果如下，剛好是第2個(gè).p2。

原理是這樣的。

是不是非常容易？

三、還可以更靈活

現(xiàn)在在原先的 dom 中插入其他干擾元素，比如這樣的。

<h1 class="h1">標(biāo)題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">標(biāo)題段落2</h2>
<p class="p2">段落2</p><!--想選中這個(gè)-->
<p class="p3">段落3</p>

那么，現(xiàn)在如何選擇第2個(gè).p2并且標(biāo)簽為p的元素呢？

如果用of關(guān)鍵詞，可以很輕松的實(shí)現(xiàn)，只不過(guò)需要注意篩選條件p.p2。

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

這樣就會(huì)跳過(guò)h2.p2元素，如下：

四、兼容性和總結(jié)

其實(shí)這個(gè)關(guān)鍵詞早在 2015 年就已經(jīng)在Safari?上支持了（Safari終于雄起了一回），但直到最近才在Chrome 111上正式支持，足足落后了 8 年啊，如下：

其實(shí)沒(méi)什么好總結(jié)的，只需要記住一點(diǎn)，通過(guò)of可以提前篩選元素，然后在匹配第 N 個(gè)元素，彌補(bǔ)了nth-child和nth-of-type的不足。雖然目前還不能大規(guī)模使用，但是一些實(shí)驗(yàn)項(xiàng)目或者Electron項(xiàng)目還是可以嘗試一下的。