css3 偽類選擇器快速?gòu)?fù)習(xí)小結(jié)

發(fā)布時(shí)間：2019-09-10 16:07:02 作者：ASCll

如果說(shuō) css 作為前端開(kāi)發(fā)的基本功, 那么 "選擇器" 就是基礎(chǔ)中的基礎(chǔ)，本文介紹了css3 偽類選擇器快速?gòu)?fù)習(xí)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

如果說(shuō) css 作為前端開(kāi)發(fā)的基本功, 那么 "選擇器" 就是基礎(chǔ)中的基礎(chǔ). 如果你在復(fù)寫或者學(xué)習(xí)這些容易令人混淆的選擇器, 那么你就來(lái)對(duì)地方了, 我的老伙計(jì).

本篇文章會(huì)直接了當(dāng)?shù)谋容^它們的特性, 幫助你快速的掌握它們:

first-child
last-child
first-of-type
last-of-type
only-child
only-of-type
nth-child
nth-last-child
nth-of-type
nth-last-of-type

first-child & last-child

這兩個(gè)選擇器會(huì)匹配一組兄弟元素中的第一個(gè):

注意: 要想使得該選擇器起作用實(shí)際上需要滿足三個(gè)條件:

被前面的選擇器匹配此例中是 p
是一組兄弟元素
是第一個(gè)(或者最后一個(gè))元素

last-child 在此不多贅述, 區(qū)別就是從后向前進(jìn)行匹配.

first-of-type & last-of-type

這兩個(gè)選擇器會(huì)匹配同一組類型中的第一個(gè)(最后一個(gè))而不理會(huì)該元素的位置是否真的是在該組元素的第一個(gè)(最后一個(gè)):

注意: 要想使得該選擇器起作用實(shí)際上需要滿足兩個(gè)條件:

被前面的選擇器匹配此例中是 p
是一組兄弟元素

last-of-type 在此不多贅述, 區(qū)別就是從后向前進(jìn)行匹配.

only-child & only-of-type

only-child 匹配那些沒(méi)有兄弟元素的元素, 換句話說(shuō)匹配那些 "孤兒" 元素:

上圖中被 "孤立" 的元素有第一個(gè)  和嵌套的  它們都被選擇器匹配到了.

only-of-type 匹配一組兄弟元素中類型唯一類型的元素:

因?yàn)榈谝粋€(gè) 和第二個(gè)  以及最后的  在對(duì)應(yīng)的父元素下類型都是唯一的所以它們會(huì)被選擇器匹配到.

nth-child & nth-last-child

這些偽類選擇器最有意思的一點(diǎn)就是可以傳入一個(gè)公式 an+b, 根據(jù)這個(gè)公式來(lái)匹配元素. 這個(gè)公式有很多玩法, 導(dǎo)致有很多人將這個(gè)公式的所有組合以及所匹配的內(nèi)容背下來(lái).

實(shí)際上我們的思考方式被 css 給固化了, 因?yàn)檫@個(gè)東西從數(shù)學(xué)的角度來(lái)看非常容易摸清楚規(guī)律, 例如有如下的代碼:

<style>
  p:nth-child(2n+1){
    color:blue;
  }
</style>
<body>
  <p>第一行</p>
  <p>第二行</p>
  <p>第三行</p>
</body>

思考模式:

先收集匹配到的元素, 在這個(gè)例子中就是三個(gè)  標(biāo)簽
從下標(biāo) 0 后數(shù)到 2 表示  的個(gè)數(shù), 依次帶入公式求值
將對(duì)應(yīng)下標(biāo)的元素進(jìn)行匹配(元素下標(biāo)從1開(kāi)始數(shù))

結(jié)果:

公式	解釋
2n	所有偶數(shù)元素
2n+1	所有奇數(shù)元素
n & n+1	所有元素
n+2	第二個(gè)元素后的元素(包括第二個(gè)元素)
n+3	第三個(gè)元素后的元素(包括第三個(gè)元素)
0n	啥都匹配不到
3n+4	4,7,10,13 ....
1	只匹配第一個(gè)元素
-n+2	只匹配前兩個(gè)元素
nth-child(odd)	奇數(shù)元素
nth-child(even)	偶數(shù)元素

不過(guò)不要忘記了 nth-child 匹配的依然是同一組兄弟元素, 不過(guò)有趣的是 nth-child 會(huì)利用選擇器進(jìn)行過(guò)濾, 但是應(yīng)用樣式的時(shí)候卻不把樣式應(yīng)用到匹配的元素上:

上圖中 <div> 中的兩組  元素被視為兄弟元素進(jìn)行匹配, 但是有趣的是作為第三個(gè)  元素 "第三行" 也被匹配到了, 這說(shuō)明在應(yīng)用樣式會(huì)直接應(yīng)用在一組兄弟元素中而不是被匹配到的  元素, 不過(guò)需要注意的是如果圖片中的 "第三組" 中的  是 <div> 的話類型不同樣式是不會(huì)被應(yīng)用的.

nth-last-child 就是從后向前的版本, 這里就不在詳細(xì)舉例了:

MDN 上還給出了一個(gè)有意思的例子, 可以根據(jù)元素的數(shù)量來(lái)控制元素的樣式:

li:nth-last-child(n+3),
li:nth-last-child(n+3) ~ li {
  color: red;
}

<h4>A list of four items (styled):</h4>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ol>

<h4>A list of two items (unstyled):</h4>
<ol>
  <li>One</li>
  <li>Two</li>
</ol>

nth-of-type & nth-last-of-type

nth-of-type 匹配: