vue scoped css 深度选择器 父组件的样式将渗透到子组件中

当 style 标记具有该scoped属性时，其CSS将仅应用于当前组件的元素。代码如下：

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>
复制代码

编译之后

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>
复制代码

可以看出来，组件之间的样式是相互独立的，即父组件不能使用子组件的样式，子组件也不能使用父组件的样式。

如果，不加scoped， 所有的组件都可以使用,称之为全局样式，加了scoped只有本组件可以使用，称为本地样式.

混合样式

您可以在同一组件中包含范围和非范围样式：

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>
复制代码

子组件根元素

使用时scoped，父组件的样式不会泄漏到子组件中。但是，子组件的根节点将受父级作用域CSS和子级作用域CSS的影响。这是设计的，以便父级可以设置子根元素的样式以进行布局。

深度选择器

如果您希望scoped样式中的选择器“深入”，即影响子组件，则可以使用>>>组合子：

<style scoped>
.a >>> .b { /* ... */ }
</style>
复制代码

以上将编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }
复制代码

某些预处理器（如Sass）可能无法>>>正确解析。在这些情况下，您可以使用组合/deep/或::v-deep组合 - 两者都是别名，>>>并且工作完全相同。(已测试vue less中>>>及/deep/有效,::v-deep暂无效果)

<style lang="less" scoped>
.text-box {
  /deep/ input {
    width: 166px;
    text-align: center;
  }
}
</style>
复制代码

官方文档：vue-loader.vuejs.org/guide/scope…

作者：doubleyong
链接：https://juejin.im/post/5cf8c541f265da1b8b2b4ee3
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。