現在，Safari（技術預覽版106）和Firefox（版本78）的預覽版均支持新的CSS :is() 和 :where() 偽類， Chrome的實施仍然落后，
使用 :is() 減少重復
你可以使用 :is() 偽類來洗掉選擇器串列中的重復項，
/* BEFORE */ .embed .save-button:hover, .attachment .save-button:hover { opacity: 1; } ? /* AFTER */ :is(.embed, .attachment) .save-button:hover { opacity: 1; }
此功能主要在未處理的標準CSS代碼中有用，如果使用Sass或類似的CSS預處理程式，則可能更喜歡嵌套，
注意：瀏覽器還支持非標準的 :-webkit-any() 和 :-moz-any() 偽類，它們與 :is() 相似，但限制更多，WebKit在2015年棄用了 :-webkit-any() ，Mozilla已將Firefox的用戶代理樣式表更新為使用 :is() 而不是 :-moz-any()，
使用 :where() 來保持低特殊性
:where() 偽類與 :is() 具有相同的語法和功能，它們之間的唯一區別是 :where() 不會增加整體選擇器的特殊性（即某條CSS規則特殊性越高，它的樣式越優先被采用），
:where()偽類及其任何引數都不對選擇器的特殊性有所幫助，它的特殊性始終為零，
此功能對于應易于覆寫的樣式很有用，例如，基本樣式表 sanitize.css 包含以下樣式規則，如果缺少 `` 屬性，該規則將設定默認的填充顏色：
svg:not([fill]) { fill: currentColor; }
由于其較高的特殊性（B = 1，C = 1），網站無法使用單個類選擇器（B = 1）覆寫此宣告，并且被迫添加 !important 或人為地提高選擇器的特殊性（例如 .share- icon.share-icon），
.share-icon { fill: blue; /* 由于特殊性較低，因此不適用 */ }
CSS庫和基礎樣式表可以通過用 :where() 包裝它們的屬性選擇器來避免這個問題，以保持整個選擇器的低特殊性(C=1)，
/* sanitize.css */ svg:where(:not([fill])) { fill: currentColor; } ? /* author stylesheet */ .share-icon { fill: blue; /* 由于特殊性較高，適用 */ }
總結
如果你覺得這篇文章不錯，請別忘記點個贊跟關注哦~??
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/11076.html
標籤：Html/Css
上一篇：轉行做前端的學習心得，深情交流
下一篇：CSS居中對齊