vue踩坑——深度作用选择器

今天一位老哥问我一个问题:他在调试element-ui样式的时候，在控制台可以调样式，但是写进css就不行，样式就不起作用了。

image.png image.png

然后我大概的看了一下他的模板结构，发现他这个是由于一个深度作用选择器导致样式无法修改。

vue项目中，当<style>标签有scoped属性时，它的 CSS 样式只作用于当前组件中的元素，父组件的样式将不会渗透到子组件中。也就是说，他能修改的样式不够深。

一般有两种解决方法

• 使用>>> 操作符

<style scoped>
  .a >>> .b { /* ... */ }
</style>

上述代码将会编译成：

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

• 对于scss这类的预处理器
  有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。

.a{
  /deep/ .b{
    /* ... */
  }
}

---

更多文章访问个人博客：http://www.lfanliu.top