前言
如果說 css 作爲前端開發的基本功, 那麼 "選擇器" 就是基礎中的基礎. 如果你在複寫或者學習這些容易令人混淆的選擇器, 那麼你就來對地方了, 我的老夥計.
本篇文章會直接了當的比較它們的特性, 幫助你快速的掌握它們:
- 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 在此不多贅述, 區別就是從後向前進行匹配.
first-of-type & last-of-type
這兩個選擇器會匹配同一組類型中的第一個(最後一個)而不理會該元素的位置是否真的是在該組元素的第一個(最後一個):
注意: 要想使得該選擇器起作用實際上需要滿足兩個條件:
- 被前面的選擇器匹配 此例中是
p - 是一組兄弟元素
last-of-type 在此不多贅述, 區別就是從後向前進行匹配.
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>思考模式:
- 先收集匹配到的元素, 在這個例子中就是三個
<p>標籤 - 從下標 0 後數到 2 表示
<p>的個數, 依次帶入公式求值 - 將對應下標的元素進行匹配(元素下標從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 匹配的依然是同一組兄弟元素, 不過有趣的是 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-type 和 nth-child 是有些區別的, 計算完成後樣式的應用到了被匹配的元素身上, 而不是兄弟元素上.
nth-last-of-type 是一個從後向前的版本, 這裏不在詳細介紹:
