scoped特性

scoped 是一个 Vue 组件选项，用于限制 CSS 样式的作用范围，防止全局样式的污染。当一个组件的 scoped 属性设置为 true 时，该组件的样式只会作用于该组件内部的元素，而不会影响到其他组件或页面的样式。

例如，在一个 Vue 单文件组件中，如果将 <style> 标签加上 scoped 属性，那么该组件的样式只会作用于该组件内部的元素，而不会影响到其他组件或页面的样式。这样做的好处是，可以避免样式冲突和样式覆盖的问题，提高了组件的可重用性和维护性。

其实就是scoped不能引用全局样式

如果我们想在scoped属性下引用全局样式

可以在 scoped 样式的内部使用 :global 指令来使用全局样式。例如，在一个 scoped 样式的内部使用 :global 指令来使用全局样式：

<template>
  <el-button class="my-button">My Button</el-button>
</template>

<style scoped>
.my-button {
  color: red;
  font-size: 16px;
  /* 使用 :global 指令来使用全局样式 */
  border: 1px solid :global(--my-border-color);
}
</style>

如果想要使带有 scoped 样式中的选择器能够作用得“更深”，例如影响子组件内部的样式，可以使用 >>> 或/deep/ 操作符：

例如

<template>
  <div class="parent">
    <h1>Parent Component</h1>
    <div class="child">
      <h2>Child Component</h2>
    </div>
  </div>
</template>

<style scoped>
.parent h1 {
  color: red;
}

.child >>> h2 {
  color: blue;
}
</style>

.parent 是父组件中的一个 class，.child 是 .parent 中的子组件的 class。在 scoped 样式中，.parent h1 选择器会只影响父组件中的 h1 标签，而不影响子组件的 h2 标签。为了选择子组件中的 h2 标签，我们使用了深度选择器 >>>，这样子就可以选择到子组件中的 h2 标签，并把它的颜色设置为蓝色。需要注意的是，深度选择器只在选择器的最后一个元素起作用，所以在本例中 .child 仍然受到了 scoped 样式的限制。

猜你喜欢