**用途：** 防止全局同名CSS污染 ，例如webpack打包时，两个不同页面的同名class，会进行样式的合并，造成样式的混乱，这是加上scope属性，可以解决， **原理：** 在标签加上v-data-something属性，再在选择器时加上对应\[v-data-something\]，即CSS带属性选择器，以此完成类似作用域的选择方式 缺点： （1）由于只是通过属性限制，类还是原来的类，所以在其他地方对类设置样式还是可以造成污染。 （2）添加了属性选择器，对于CSS选择器的权重加重了。 （3）外层组件包裹子组件，会给子组件的根节点添加data属性。在外层组件中无法修改子组件中除了根节点以外的节点的样式。比如子组件中有box类，在父节点中设置样式，会被编译为 ~~~ .box[data-v-x] ~~~ 的形式，但是box类所在的节点上没有添加data属性，因此无法修改样式。 **那么当我们使用了一个外部框架,同时又给 style 添加了 scope 属性,如何修改外部框架的样式呢?** > **可以使用/deep/或者>>>穿透CSS，这样外层组件设置的box类编译后的就为\[data-v-x\] .box了，就可以进行修改。** 例如: 加/deep/可以修改，子组件的样式 ~~~ /deep/ .el-table .red-row { background: #ffc2c2; } ~~~ ~~~ .el-table >>> .red-row { background: #ffc2c2; } ~~~