插槽选择器和全局选择器

之前我们已经了解了深度选择器，处于 scoped 样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用 :deep() 这个伪类：

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

上面的代码会被编译成：

.a[data-v-f3f3eg9] .b {
  /* ... */
}

插槽选择器

默认情况下，作用域样式不会影响到 <slot/> 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。使用 :slotted 伪类以明确地将插槽内容作为选择器的目标：

以下是 :slotted 选择器的用法：

1.基本用法：

/* 选择插入到插槽中的所有元素 */
:slotted(*) {
   /* CSS 样式 */
}

1.选择特定元素：

/* 选择插入到插槽中的特定元素 */
:slotted(.special-class) {
   /* CSS 样式 */
}

1.选择特定元素类型：

/* 选择插入到插槽中的特定元素类型 */
:slotted(span) {
   /* CSS 样式 */
}

1.选择特定属性值：

/* 选择插入到插槽中的具有特定属性值的元素 */
:slotted([data-custom="value"]) {
   /* CSS 样式 */
}

这些示例演示了如何使用 :slotted 选择器来选择插入到插槽中的不同类型的元素或具有特定类名、属性值的元素。通过这种方式，你可以根据需要为插入到插槽中的元素定义不同的样式。

全局选择器

如果想让其中一个样式规则应用到全局，比起另外创建一个 <style>，可以使用 :global 伪类来实现 (看下面的代码)：

<style scoped>
:global(.red) {
  color: red;
}
</style>

混合使用局部与全局样式

你也可以在同一个组件中同时包含作用域样式和非作用域样式：

<style>
/* 全局样式 */
</style>


<style scoped>
/* 局部样式 */
</style>