這篇文章主要介紹了CSS :is() 和 :where()有什么用,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)公司作為成都網(wǎng)站建設(shè)公司,專注成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì),有關(guān)企業(yè)網(wǎng)站設(shè)計(jì)方案、改版、費(fèi)用等問(wèn)題,行業(yè)涉及紙箱等多個(gè)領(lǐng)域,已為上千家企業(yè)服務(wù),得到了客戶的尊重與認(rèn)可。
現(xiàn)在,Safari(技術(shù)預(yù)覽版106)和Firefox(版本78)的預(yù)覽版均支持新的CSS :is()
和 :where()
偽類。Chrome的實(shí)施仍然落后。
使用 :is() 減少重復(fù)
你可以使用 :is()
偽類來(lái)刪除選擇器列表中的重復(fù)項(xiàng)。
/* before */ .embed .save-button:hover, .attachment .save-button:hover { opacity: 1; } /* after */ :is(.embed, .attachment) .save-button:hover { opacity: 1; }
此功能主要在未處理的標(biāo)準(zhǔn)CSS代碼中有用。如果使用Sass或類似的CSS預(yù)處理程序,則可能更喜歡嵌套。
注意:瀏覽器還支持非標(biāo)準(zhǔn)的 :-webkit-any()
和 :-moz-any()
偽類,它們與 :is()
相似,但限制更多。WebKit在2015年棄用了 :-webkit-any()
,Mozilla已將Firefox的用戶代理樣式表更新為使用 :is()
而不是 :-moz-any()
。
使用 :where() 來(lái)保持低特殊性
:where()
偽類與 :is()
具有相同的語(yǔ)法和功能。它們之間的唯一區(qū)別是 :where()
不會(huì)增加整體選擇器的特殊性(即某條CSS規(guī)則特殊性越高,它的樣式越優(yōu)先被采用)。
:where()
偽類及其任何參數(shù)都不對(duì)選擇器的特殊性有所幫助,它的特殊性始終為零。
此功能對(duì)于應(yīng)易于覆蓋的樣式很有用。例如,基本樣式表 sanitize.css 包含以下樣式規(guī)則,如果缺少 <svg fill>
屬性,該規(guī)則將設(shè)置默認(rèn)的填充顏色:
svg:not([fill]) { fill: currentColor; }
由于其較高的特殊性(B = 1,C = 1),網(wǎng)站無(wú)法使用單個(gè)類選擇器(B = 1)覆蓋此聲明,并且被迫添加 !important
或人為地提高選擇器的特殊性(例如 .share- icon.share-icon
)。
.share-icon { fill: blue; /* 由于特殊性較低,因此不適用 */ }
CSS庫(kù)和基礎(chǔ)樣式表可以通過(guò)用 :where()
包裝它們的屬性選擇器來(lái)避免這個(gè)問(wèn)題,以保持整個(gè)選擇器的低特殊性(C=1)。
/* sanitize.css */ svg:where(:not([fill])) { fill: currentColor; } /* author stylesheet */ .share-icon { fill: blue; /* 由于特殊性較高,適用 */ }
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“CSS :is() 和 :where()有什么用”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
網(wǎng)頁(yè)題目:CSS:is()和:where()有什么用
文章地址:http://bm7419.com/article16/jcisdg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、外貿(mào)建站、靜態(tài)網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)頁(yè)設(shè)計(jì)公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)