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

楼主^#

更多发布于：2019-06-10 21:08

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

&lt;style scoped&gt;
.example {
  color: red;
}
&lt;/style&gt;
&lt;template&gt;
  &lt;div class="example"&gt;hi&lt;/div&gt;
&lt;/template&gt;

编译之后

&lt;style&gt;
.example[data-v-f3f3eg9] {
  color: red;
}
&lt;/style&gt;
&lt;template&gt;
  &lt;div class="example" data-v-f3f3eg9&gt;hi&lt;/div&gt;
&lt;/template&gt;

可以看出来，组件之间的样式是相互独立的，即父组件不能使用子组件的样式，子组件也不能使用父组件的样式。如果，不加scoped，所有的组件都可以使用,称之为全局样式，加了scoped只有本组件可以使用，称为本地样式.

混合样式

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

&lt;style&gt;
/* global styles */
&lt;/style&gt;
&lt;style scoped&gt;
/* local styles */
&lt;/style&gt;

子组件根元素

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

深度选择器

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

&lt;style scoped&gt;
.a &gt;&gt;&gt; .b { /* ... */ }
&lt;/style&gt;

以上将编译成：

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

某些预处理器（如Sass）可能无法>>>正确解析。在这些情况下，您可以使用组合/deep/或::v-deep组合 - 两者都是别名，>>>并且工作完全相同。

&lt;style lang="less" scoped&gt;
.text-box {
  /deep/ input {
    width: 166px;
    text-align: center;
  }
}
&lt;/style&gt;

官方文档：https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

参考：https://juejin.im/post/5cf8c541f265da1b8b2b4ee3

喜欢0

知识需要管理，知识需要分享

blanc 新手最后登录2020-11-26 发帖数1 加关注写私信	沙发^# 发布于：2020-09-25 16:45 666,vue+element 有时就需要这个修改样式昨天刚好就用到了这个‘>>>’
	回复(0) 喜欢(0)