css3 僞類選擇器快速複習

時間 2019-11-16

標籤 css3 css 選擇器快速複習欄目 CSS 简体版

原文原文鏈接

前言

若是說 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 匹配那些沒有兄弟元素的元素, 換句話說匹配那些 "孤兒" 元素:
圖片

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

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

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

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>

思考模式:

先收集匹配到的元素, 在這個例子中就是三個  標籤
從下標 0 後數到 2 表示  的個數, 依次帶入公式求值
將對應下標的元素進行匹配(元素下標從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> 中的兩組  元素被視爲兄弟元素進行匹配, 可是有趣的是做爲第三個  元素 "第三行" 也被匹配到了, 這說明在應用樣式會直接應用在一組兄弟元素中而不是被匹配到的  元素, 不過須要注意的是若是圖片中的 "第三組" 中的  是 <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>