vue的scope导致样式修改不了问题

如果你在用vue开发，你一定用过它css的scoped属性，你会发现当你添加scope属性以后，有时候修改样式变得很费劲有木有？

这里先说一下scoped的原理：

再添加scoped以后，大致可以看成做了两步操作

1. 给HTML的DOM节点加一个不重复data属性(形如：data-xxx)来表示他的唯一性
2. 在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-xxx]）来私有化样式

大家都知道css样式有一个优先级的说法，scoped的这一操作，虽然达到了组件样式模块化的目的，但是会造成一种后果：每个样式的权重加重了：理论上我们要去修改这个样式，需要更高的权重去覆盖这个样式。这是增加复杂度的其中一个维度。

然后就是你想修改样式的时候 得频繁的写!important有木有？关键是low就不说有时候还不好使，苦不堪言。

 

当最简单粗暴的方法就是不添加scoped属性（屡试不爽）

接下来告诉大家一个高大上的方法，你不用写!important，也不用删掉scoped，你只需在选择器前加个/deep/即可

.add-student{
    /deep/ .el-dialog{
        xxxxx
    }
}