如何使用css3偽類選擇器

如何使用css3 偽類選擇器？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：網(wǎng)站制作、成都網(wǎng)站設計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的貴池網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

first-child & last-child

這兩個選擇器會匹配一組兄弟元素中的第一個:

如何使用css3 偽類選擇器

注意: 要想使得該選擇器起作用實際上需要滿足三個條件:

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

last-child 在此不多贅述, 區(qū)別就是從后向前進行匹配.

如何使用css3 偽類選擇器

first-of-type & last-of-type

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

如何使用css3 偽類選擇器

注意: 要想使得該選擇器起作用實際上需要滿足兩個條件:

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

last-of-type 在此不多贅述, 區(qū)別就是從后向前進行匹配.

如何使用css3 偽類選擇器

only-child & only-of-type

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

如何使用css3 偽類選擇器

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

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

如何使用css3 偽類選擇器

因為第一個 和第二個  以及最后的  在對應的父元素下類型都是唯一的所以它們會被選擇器匹配到.

nth-child & nth-last-child

這些偽類選擇器最有意思的一點就是可以傳入一個公式 an+b, 根據(jù)這個公式來匹配元素. 這個公式有很多玩法, 導致有很多人將這個公式的所有組合以及所匹配的內(nèi)容背下來.

實際上我們的思考方式被 css 給固化了, 因為這個東西從數(shù)學的角度來看非常容易摸清楚規(guī)律, 例如有如下的代碼:

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

思考模式:

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

結果:

如何使用css3 偽類選擇器

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

如何使用css3 偽類選擇器

不過不要忘記了 nth-child 匹配的依然是同一組兄弟元素, 不過有趣的是 nth-child 會利用選擇器進行過濾, 但是應用樣式的時候卻不把樣式應用到匹配的元素上:

如何使用css3 偽類選擇器

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

nth-last-child 就是從后向前的版本, 這里就不在詳細舉例了:

如何使用css3 偽類選擇器

MDN 上還給出了一個有意思的例子, 可以根據(jù)元素的數(shù)量來控制元素的樣式:

li:nth-last-child(n+3),
li:nth-last-child(n+3) ~ li {
  color: red;
}

<h5>A list of four items (styled):</h5>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ol>

<h5>A list of two items (unstyled):</h5>
<ol>
  <li>One</li>
  <li>Two</li>
</ol>

nth-of-type & nth-last-of-type

nth-of-type 匹配:

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

如何使用css3 偽類選擇器

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

nth-last-of-type 是一個從后向前的版本, 這里不在詳細介紹:

如何使用css3 偽類選擇器

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

網(wǎng)站標題：如何使用css3偽類選擇器
URL鏈接：http://jinyejixie.com/article46/gdjjeg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、虛擬主機、靜態(tài)網(wǎng)站、小程序開發(fā)、微信公眾號、用戶體驗

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

如何使用css3偽類選擇器