CSS-is()和-where()即将出现在浏览器中

新的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）覆盖此声明，并被迫添加！重要或人为增加选择器的特异性（例如.share-icon.share-图标）。.share-icon{填充：蓝色；/*Notapplicableduetolowspecificity*/}CSS库和基本样式表可以通过使用:where()包装它们的属性选择器来避免这个问题，以保持选择器的整体低特异性（C=1）。/*sanitize.css*/svg:where(:not([fill])){fill:currentColor;}/*authorstylesheet*/.share-icon{fill:blue;/*由于高度特异性而适用*/}