您好,登錄后才能下訂單哦!
今天小編給大家分享一下CSS的:Where和:Is偽類函數(shù)怎么用的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
什么是 :is 與 :where?
:is() 和 :where() 都是偽類函數(shù),可以幫助縮短和停止創(chuàng)建選擇器時(shí)的重復(fù)。它們都接受選擇器的參數(shù)數(shù)組(id,類,標(biāo)簽等),并選擇可以在該列表中選擇的任何元素。
這對(duì)如何幫助我們編寫更短的選擇器可能沒有多大意義,所以讓我們嘗試使用 :where() 和 :is() 。
如何使用 :is 與 :where?
:where() 可以幫助我們解決類似這樣的問題
.btn span > a:hover, #header span > a:hover, #footer span > a:hover { ... }
變成這樣的東西
:where(.btn, #header, #footer) span > a:hover { ... }
和 :is() 可以幫助將相同的示例添加到該示例中
is(.btn, #header, #footer) span > a:hover { ... }
:is 與 :where 和有什么不一樣?
:where() 和 :is() 看起來和功能都是一樣的,但是它們之間有一個(gè)區(qū)別要記住,那就是它們有不同的特殊性。:where() 是簡(jiǎn)單的,其特異性總是為0,而 :is() 的特異性為最強(qiáng)的選擇器。
什么是CSS特異性(簡(jiǎn)而言之)?
在CSS中有四個(gè)層次的特異性層次。每一個(gè)級(jí)別或類別都有不同的分?jǐn)?shù),我們可以將所有的分?jǐn)?shù)相加來計(jì)算選擇器的特異性。
哪個(gè)選擇器的數(shù)量最多,哪個(gè)元素的樣式就會(huì)被應(yīng)用到該元素上,這就是為什么有時(shí)當(dāng)你寫CSS時(shí),你的樣式不會(huì)被應(yīng)用,會(huì)在開發(fā)工具中顯示為劃線。
特異性等級(jí)評(píng)分
ID——特異性得分為 100
內(nèi)聯(lián)樣式——特異性得分為 1000
元素和偽類——特異性得分為 1
類、偽類和屬性——特異性得分為 10
例如
button.btn { color: red; } .btn { color: green; }
.btn = 10
button.btn = 1 + 10 = 11
如果我們把 .btn 類放在 <button> 標(biāo)簽上,文字就會(huì)變成紅色,因?yàn)?button.btn 選擇器的分?jǐn)?shù)高于 .btn 選擇器。
正如你所看到的,有兩種不同的專屬性級(jí)別的偽類,這是因?yàn)椴煌膫晤惪赡芫哂胁煌膶傩?,這取決于你使用的偽類以及如何使用它們。
css的選擇器可以分為三大類,即id選擇器、class選擇器、標(biāo)簽選擇器。它們之間可以有多種組合,有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等
以上就是“CSS的:Where和:Is偽類函數(shù)怎么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。