vue中使用深度选择器修改第三方UI库默认样式时，/deep/报错不生效

在vue项目中，引用了第三方UI库(如vant-ui)，此时想在某个组件里面更改vant-Ui的样式，而不影响全局，发现直接用它里面组件的类名去修改无效果。这时候想到了用深度选择器解决这个问题，但是发现使用了 /deep/报错这很可能是使用了scss编译的问题然后改成 >>> 也是不报错了但是也不生效的，最后发现可以改成::deep深度选择器总结：官方深度选择器解释：深度选择器

张续栋

3439人浏览 · 2020-06-04 14:11:09

张续栋 · 2020-06-04 14:11:09 发布

在vue项目中，引用了第三方UI库(如vant-ui)，此时想在某个组件里面更改vant-Ui的样式，而不影响全局，发现直接用它里面组件的类名去修改无效果。

这时候想到了用深度选择器解决这个问题，但是发现使用了 /deep/报错

这很可能是使用了scss编译的问题
在这里插入图片描述
然后改成 >>> 也是不报错了但是也不生效的，最后发现可以改成 ::deep

深度选择器总结：
官方深度选择器解释：

深度选择器一般用于组件开发，修改组件内的某些样式

深度选择器表示种类：

“/deep/”
“>>>”
“::deep”
“:v-deep”

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^