在Web开发中，我们通常使用CSS的scoped属性来限制样式作用域。scoped属性允许我们将样式应用于指定的组件（例如Vue或React组件），而不会影响其他组件。 但是，在某些情况下，我们可能需要让scoped的样式依然匹配全局选择器，这时可以使用:is()或:where()伪类。
scoped属性
首先，让我们了解一下CSS Scoped属性。Scoped属性是一个非常有用的特性，它可以在Vue、React等组件框架中使用，并且可以限制样式的作用范围。 使用scoped属性，我们可以确保在相同的HTML结构中，不同的组件样式不会互相干扰。
<template>
<div class="root">
<h2>Component A</h2>
<p>Hello world!</p>
</div>
</template>
<style scoped>
.root {
border: 1px solid red;
}
h2 {
color: blue;
}
</style>
在这个例子中，我们定义了一个简单的Vue组件，并在其style标签上添加了scoped属性。 这意味着所有的样式都仅适用于该组件内部，并不会污染其他组件或全局样式表中的样式。
:is()伪类
在某些情况下，我们可能需要在scoped的样式中使用全局选择器。 例如，如果我们希望为一组元素设置相同的样式，但这些元素具有不同的标签名和类名，则可以使用:is()伪类。
<style scoped>
:is(h1, h2, h3) {
color: red;
}
:is(.btn-primary, .btn-secondary) {
background-color: blue;
}
</style>
在这个例子中，我们使用:is()伪类来将样式应用到多个匹配的选择器。 在第一个规则中，我们将样式应用于h1、h2和h3标题元素；在第二个规则中，我们将样式应用于两个具有不同类的按钮元素。
请注意，:is()伪类在IE和Edge浏览器中并不支持。 如果你需要支持这些浏览器，可以使用:where()伪类替代。
:where()伪类
:where()和:is()是非常相似的CSS伪类，它们都允许我们将样式应用于多个选择器。 不同之处在于，:where()伪类会忽略无效的选择器，而:is()不会。
<style scoped>
:where(h1, h2, h3) {
color: red;
}
:where(.btn-primary, .btn-secondary) {
background-color: blue;
}
</style>
在这个例子中，我们使用:where()伪类来将样式应用于多个选择器。 在第一个规则中，我们将样式应用于h1、h2和h3标题元素；在第二个规则中，我们将样式应用于两个具有不同类的按钮元素。 与:is()相比，这里的区别是：如果浏览器不支持其中一个选择器，:where()会忽略它并继续处理其他选择器。
更高级的用法
除了上述用法之外，:is()和:where()还有一些更高级的用法，例如递归选择器和使用组合选择器。 这些用法可以扩展我们的样式表，并使其更灵活和可读性更高。
<style scoped>
:is(.card, .panel) :is(h1, h2, h3) {
color: red;
}
:where(.btn-primary, .btn-secondary) + p {
margin-top: 20px;
}
</style>
在这个例子中，我们首先使用:is()将样式应用于.card和.panel类的所有标题元素。我们使用组合选择器将这两个选择器组合起来，并只针对特定的标题元素（h1、h2和h3）应用样式。 在第二个规则中，我们使用:where()将样式应用于按钮和紧随其后的段落元素。 我们使用加号选择器来仅选择特定的段落元素。
总结
在本文中，我们介绍了如何使用:is()和:where()伪类让scoped的样式依然匹配全局选择器。通过使用这些伪类，我们可以扩展scoped的样式，以满足各种需求，并确保不会干扰其他组件或全局样式表。 无论你是使用Vue、React还是其他框架，这些技巧都是非常有用的，可以让你更好地控制样式作用范围。
