# vue中的css深度选择器 ## 概念与作用当 ` ``` 显然，由于scoped属性的防渗透作用，我添加的背景色并不会生效。通常，会有两种处理方法： 1. 将scoped属性去掉。样式生效了，但是这种写法是作用到全局的，如果不严格规范class的命名，非常容易污染全局样式。这种写法，其实等同于写在全局样式文件中。 2. 保留scoped属性，使用深度选择器，代码如下 ```html ``` 查看浏览器，以上代码被编译成 ```css [data-v-e44d851a] .ant-card-head-title { background: yellowgreen; } ``` 很明显，添加了这个属性之后，可以达到我们想要的效果，而且不会污染全局样式 ## 写法 ```html ``` 写法1 和写法4，都支持sass预处理器。但是在新的vue3.0 单文件规范中，如果你还是使用写法1，会碰到如下警告: > **[@vue/compiler-sfc] `::v-deep` usage as a combinator has been deprecated. Use `:deep()` instead.** 写法1在vue3.0中已经被弃用了，以后小伙伴们在开发vue3.0项目的时候，还是使用写法4吧～，有一说一，写法4在语义上也更有助于理解。关于写法1和写法3，主要是不支持sass预处理器的解析，且`>>>`操作符存在浏览器兼容性问题，所以朋友们还是谨慎使用吧～ ## 参考链接 1. [vueLoader-深度作用选择器](https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B1%E5%BA%A6%E4%BD%9C%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8) 2. [css关于/deep/的解释和用法](https://blog.csdn.net/weixin_40442888/article/details/97622810)