css3 僞類選擇器快速複習

前言

若是說 css 做爲前端開發的基本功, 那麼 "選擇器" 就是基礎中的基礎. 若是你在複寫或者學習這些容易使人混淆的選擇器, 那麼你就來對地方了, 個人老夥計.css

本篇文章會直接了當的比較它們的特性, 幫助你快速的掌握它們:html

  • 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

這兩個選擇器會匹配一組兄弟元素中的第一個:
圖片描述前端

注意: 要想使得該選擇器起做用實際上須要知足三個條件:學習

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

last-child 在此很少贅述, 區別就是從後向前進行匹配.spa

圖片描述

first-of-type & last-of-type

這兩個選擇器會匹配同一組類型中的第一個(最後一個)而不理會該元素的位置是否真的是在該組元素的第一個(最後一個):
圖片描述code

注意: 要想使得該選擇器起做用實際上須要知足兩個條件:htm

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

last-of-type 在此很少贅述, 區別就是從後向前進行匹配.blog

圖片描述

only-child & only-of-type

only-child 匹配那些沒有兄弟元素的元素, 換句話說匹配那些 "孤兒" 元素:
圖片描述圖片

上圖中被 "孤立" 的元素有第一個 <p> 和嵌套的 <span> 它們都被選擇器匹配到了.開發

only-of-type 匹配一組兄弟元素中類型惟一類型的元素:
圖片描述

由於第一個<p> 和第二個 <p> 以及最後的 <span> 在對應的父元素下類型都是惟一的因此它們會被選擇器匹配到.

nth-child & nth-last-child

這些僞類選擇器最有意思的一點就是能夠傳入一個公式 an+b, 根據這個公式來匹配元素. 這個公式有不少玩法, 致使有不少人將這個公式的全部組合以及所匹配的內容背下來.

實際上咱們的思考方式被 css 給固化了, 由於這個東西從數學的角度來看很是容易摸清楚規律, 例若有以下的代碼:

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

思考模式:

  1. 先收集匹配到的元素, 在這個例子中就是三個 <p> 標籤
  2. 從下標 0 後數到 2 表示 <p> 的個數, 依次帶入公式求值
  3. 將對應下標的元素進行匹配(元素下標從1開始數)

結果:
圖片描述

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

在這個例子中展現了 nth-child 的幾種常見的匹配規則, 包括不會匹配到任何內容的 0n:

圖片描述

nth-child 在樣式的應用上比較特殊, 在下面的這個例子中 div 做爲非 p 元素是不會被 p:nth-child 匹配到的. 所以 div 打破了 p 元素的連續性, 按照常理來講在 div 後的 p 元素應該從新開始匹配 第四行 纔會被應用樣式, 可是咱們看到的卻不是這樣 div 後的 p 被匹配到了.

若是無視元素的名稱的差別, 含有 第三行p 標籤確實是 2 的倍數, 也就是說 nth-child 會統計全部相鄰的兄弟元素而無視選擇器, 而應用樣式的時候會使用選擇器進行過濾.:
圖片描述

上圖中 <div> 中的兩組 <p> 元素被視爲兄弟元素進行匹配, 可是有趣的是做爲第三個 <p> 元素 "第三行" 也被匹配到了, 這說明在應用樣式會直接應用在一組兄弟元素中而不是被匹配到的 <p> 元素, 不過須要注意的是若是圖片中的 "第三組" 中的 <p><div> 的話類型不一樣樣式是不會被應用的.

nth-last-child 就是從後向前的版本, 這裏就不在詳細舉例了:
圖片描述

MDN 上還給出了一個有意思的例子, 能夠根據元素的數量來控制元素的樣式:

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 匹配:

  • 同一組中相同類型的兄弟元素
  • 匹配對應公式計算值的元素

圖片描述

你注意到了嗎 nth-of-typenth-child 是有些區別的, 計算完成後樣式的應用到了被匹配的元素身上, 而不是兄弟元素上.

nth-last-of-type 是一個從後向前的版本, 這裏不在詳細介紹:
圖片描述

相關文章
相關標籤/搜索