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
    }
}