前言
如果說 css 作為前端開發的基本功, 那么 "選擇器" 就是基礎中的基礎. 如果你在復寫或者學習這些容易令人混淆的選擇器, 那么你就來對地方了, 我的老伙計.
本篇文章會直接了當的比較它們的特性, 幫助你快速的掌握它們:
first-child & last-child
這兩個選擇器會匹配一組兄弟元素中的第一個:
注意: 要想使得該選擇器起作用實際上需要滿足三個條件:
plast-child 在此不多贅述, 區別就是從后向前進行匹配.
first-of-type & last-of-type
這兩個選擇器會匹配同一組類型中的第一個(最后一個)而不理會該元素的位置是否真的是在該組元素的第一個(最后一個):
注意: 要想使得該選擇器起作用實際上需要滿足兩個條件:
plast-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> 標簽<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 匹配的依然是同一組兄弟元素, 不過有趣的是 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 是一個從后向前的版本, 這里不在詳細介紹:
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
