**用途：** 防止全局同名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; } ~~~