by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=10535 鑫空间-鑫生活
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、引言

在Vue或React等前端框架中，其组件模块为了保证样式的唯一性，也就是拥有自己独立的CSS作用域，会使用<style scoped>这个语法，scoped属性是Chrome浏览器曾经昙花一现支持过的属性，可以实现CSS作用域效果，后来废弃了。

现在被框架使用，用来表示这段CSS是模块内私有的。

可浏览器并不支持这个属性，那框架是如何实现CSS作用域功能的呢？

方法是给设置了scoped属性的<style>元素内的CSS选择器添加随机的属性选择器，然后模块内模板HTML也都增加同样名称的属性名称，于是就能匹配上了。

如下图示意：

在大多数情况下，这番操作是没有任何问题的。

可有时候，页面中的DOM元素并非现成的，而是动态生成的，这个时候，框架就无法添加随机属性。

这种场景多出现在第三方组件，或者需要直接面向DOM处理的开发场景。

例如有如下需求，希望重置某第三方组件单选框的颜色为各种状态色：

我们打开控制台查看对应的HTML结构，会发现绘制边框的这个元素上并没有任何随机属性，是干干净净的原始的HTML内容：

如果希望对这个.ant-radio-inner元素进行样式重置，则写在scoped范围内就无效。

<style scoped>
/* 无法重置 */
.status-normal .ant-radio-inner {
  --color: var(--blue6);
}
</style>

因为框架在编译后，会给.ant-radio-inner这个类名类名再增加一个属性选择器，导致无法和DOM中的元素匹配上。

我们在日常开发中，动态插入的HTML，或者绕开框架进行的的1v1 DOM操作都会遇到类似的问题。

目前，大家普通的做法是把这些CSS代码写在全局的CSS上下文中。

例如全站公用的style.css文件，或者还在这个组件文件中，但是是写在不含scoped属性的<style>元素中，例如：

<style>
/* 可以重置 */
.status-normal .ant-radio-inner {
  --color: var(--blue6);
}
</style>

但这种做法并不完美，因为本来应该在一起的CSS代码块被迫分离到了两个地方，对于日后的维护带来诸多不变。

那有没有什么办法，即写在scoped环境中，又不会增加属性选择器，从而可以匹配第三方组件DOM结构呢？

有！

一种是使用自定义的 :deep() 伪类函数（只能是Vue开发环境，React使用 :global()）：

.a :deep(.b) { /* ... */ }

还有一种更加原生，适用场景更广泛的方法，就是使用:is()或:where()伪类。

二、快速了解:is和:where伪类

:is()伪类可以看成是一种CSS书写语法糖，可以简化复杂且重复选择器的书写，例如：

.active > .class-a,
.active > .class-b,
.active > .class-c {
  display: block;
}

可以简化成：

active > :is(.class-a, .class-b, .class-c) {
  display: block;
}

而:where()伪类和:is()伪类的语法、作用一模一样，区别在于选择器的优先级上。

:where()伪类的优先级是0，无论其参数内的选择器优先级多高，是整个CSS世界中为数不多的可以降低选择器优先级的特性（另外一个是 @layer 规则，详见“详解日后定会大规模使用的CSS @layer 规则”一文）。

而:is()伪类的优先级是由括号内选择器的优先级决定的，从这一点来看，:where()伪类的作用可能还更大一点。

扯远了。

如果单看:is()伪类的作用，似乎并不能让我们兴奋，毕竟选择器简化……恩……也不是什么强烈的需求，有人说不定就喜欢分开写：瞧，洋洋洒洒，一家人整整齐齐，不挺好的！

但，如果我告诉你，在Vue等框架中使用:is()伪类，选择器就不会再增加随机属性选择器，你会怎么想呢？

还是回到上面的例子，同样在scoped样式中，现在，我们把需要重置的类名选择器使用:is()包裹下，如下所示：

<style scoped>
/* 可以重置 */
.status-normal :is(.ant-radio-inner) {
  --color: var(--blue6);
}
</style>

神奇的事情发生了！

成功重置了第三方组件的样式，此时编译出来的CSS选择器是这样子的：

就可以把第三方组件的CSS给重置掉了！

我们的代码再也不需要骨肉分离，写在两处了！

兼容性

:is()伪类正式支持是Chrome88开始的，也就是21年1月份，到现在已经快2年了，那些对兼容性要求不高的项目可以放心大胆使用，如果非要兼容陈旧浏览器，可以使用 :-webkit-any() 伪类兼容下，除了选择器的优先级不一样外（:any()伪类的优先级恒定为类选择器优先级，忽略里面的参数），其他功效是一样的，例如：

<style scoped>
/* 也可以重置 */
.status-normal :-webkit-any(.ant-radio-inner) {
  --color: var(--blue6);
}
</style>

截图示意如下：

//zxx: 如果你看到这段文字，说明你现在访问是不是原文站点，更好的阅读体验在这里：https://www.zhangxinxu.com/wordpress/?p=10535（作者张鑫旭）

兼容性如下，可以看到:any()伪类很早很早就支持了：

三、同样是逻辑伪类的:not呢？

从技术角度讲，:not()伪类也可以保护基本选择器不添加动态属性选择器，但是，操作上并没有那么简单，因为:not()伪类的含义是否定，而:is()等纯粹语法作用的伪类不同。

那是不是可以使用双重否定？

例如：

<style scoped>
.status-normal :not(:not(.ant-radio-inner)) {
  --color: var(--blue6);
}
</style>

没错，功能上讲，是可以匹配的！

但是，:not()伪类的参数支持复杂选择器也是Chrome88才支持的，和:is()伪类一样，因而完全没有使用is()伪类的理由。

四、再说点什么

我估算，任意的使用选择器作为参数的CSS函数都可以实现本文的需求。

因此，:has()伪类肯定也是可以的。

这下，CSS 四大逻辑伪类都到齐了，恰好，上周在B站录了个7分钟的介绍CSS逻辑伪类的视频，大家有兴趣可以点击看看，还没关注我B站账号的小伙伴也可以关注下，会不定期发布前端技术视频。

另外，说一点，有时候，我们可能需要整个CSS选择器都不需要增加动态的属性选择器，则可以使用通配符处理，例如：

<style scoped>
* > :is(.status-normal) :is(.ant-radio-inner) {
  --color: var(--blue6);
}
</style>

此时，随机属性值会加载通配符上，自然既保证了局部私有，又不要担心无法重置。

好了，以上就是本文的全部内容，在框架开发盛行的今日，本文的小技巧肯定很受用的！

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。
本文地址：https://www.zhangxinxu.com/wordpress/?p=10535

（本篇完）