vue中的scoped和深层选择器

vue中的scoped和深层选择器

在vue里，一个style标签有scoped属性时，表示style里的样式只能作用于当前组件元素，设置该属性，可以防止组件之间的样式互相污染。

scoped的实现原理是通过PostCSS转译实现的。

例如：

//转译前
<style scoped>
.example {
  color: blue;
}
</style>

<template>
  <div class="example">scoped</div>
</template>

//转译后
<style>
.example[data-v-233333] {
  color: blue;
}
</style>

<template>
  <div class="example" data-v-233333>scoped</div>
</template>

PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom

如果在Vue项目中引用了第三方组件，想改变第三方组件局部样式而不去除scoped属性防止样式污染，可以使用深层选择器。

深层选择器

1. >>>

   // 外层类 >>> 修改的类{修改的样式}
   .out-wrapper >>> .el-menu__header {
   	boerder:1px solid blue
   }
   

2. /deep/

   // 外层类 /deep/ 修改的类{修改的样式}
   .out-wrapper /deep/ .el-menu__header {
   	boerder:1px solid blue
   }
   

3. ::v-deep

   // ::v-deep 修改的类{修改的样式}
   ::v-deep.el-menu__header {
   	boerder:1px solid blue
   }