若是說 css 做爲前端開發的基本功, 那麼 "選擇器" 就是基礎中的基礎. 若是你在複寫或者學習這些容易使人混淆的選擇器, 那麼你就來對地方了, 個人老夥計.css
本篇文章會直接了當的比較它們的特性, 幫助你快速的掌握它們:html
這兩個選擇器會匹配一組兄弟元素中的第一個:前端
注意: 要想使得該選擇器起做用實際上須要知足三個條件:學習
p
last-child
在此很少贅述, 區別就是從後向前進行匹配.spa
這兩個選擇器會匹配同一組類型中的第一個(最後一個)而不理會該元素的位置是否真的是在該組元素的第一個(最後一個):code
注意: 要想使得該選擇器起做用實際上須要知足兩個條件:htm
p
last-of-type
在此很少贅述, 區別就是從後向前進行匹配.blog
only-child
匹配那些沒有兄弟元素的元素, 換句話說匹配那些 "孤兒" 元素:圖片
上圖中被 "孤立" 的元素有第一個 <p>
和嵌套的 <span>
它們都被選擇器匹配到了.開發
only-of-type
匹配一組兄弟元素中類型惟一類型的元素:
由於第一個<p>
和第二個 <p>
以及最後的 <span>
在對應的父元素下類型都是惟一的因此它們會被選擇器匹配到.
這些僞類選擇器最有意思的一點就是能夠傳入一個公式 an+b
, 根據這個公式來匹配元素. 這個公式有不少玩法, 致使有不少人將這個公式的全部組合以及所匹配的內容背下來.
實際上咱們的思考方式被 css 給固化了, 由於這個東西從數學的角度來看很是容易摸清楚規律, 例若有以下的代碼:
<style> p:nth-child(2n+1){ color:blue; } </style> <body> <p>第一行</p> <p>第二行</p> <p>第三行</p> </body>
思考模式:
<p>
標籤<p>
的個數, 依次帶入公式求值結果:
公式 | 解釋 |
---|---|
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-of-type
和 nth-child
是有些區別的, 計算完成後樣式的應用到了被匹配的元素身上, 而不是兄弟元素上.
nth-last-of-type
是一個從後向前的版本, 這裏不在詳細介紹: