Vue中的可以屏蔽scoped作用的“＞＞＞”深度选择器

css的scoped属性

···vue 为了防止 css 污染，当组件的

实现原理很简单，给当前组件中的每个标签都加上唯一的自定义属性：data-v-唯一的属性，然后 css 选择器都加上属性选择器.article-title[data-v-唯一的属性]，这样这个 css 只会匹配到当前页面的这个元素。

注意：每个组件的最外层的标签会带上父组件的data-v-属性，也就是这个标签会被父组件的样式匹配到，所以父组件尽量不要使用标签选择器，这个标签不要使用父组件中的 id 或者 class。

在父组件想修改子组件的css（修改elementUI组件的样式），我们可以借助深度作用选择器 >>>

div >>> .el-input{
    width: 100px;
}
/* sass/less的话可能无法识别，这时候需要使用 /deep/ 选择器。 */
div /deep/ .el-input{
    width: 100px;
}

复制代码深度作用选择器会去掉后面元素的属性选择器[data-v-]，即上面代码会编译成：div[data-v-12345667] .el-input{}。就可以匹配到子组件的元素，从而覆盖样式。