前言
我們都知道在組件中給style標(biāo)簽添加scoped屬性可以避免組件內(nèi)樣式對外界造成污染，scoped使得組件內(nèi)的樣式變成局域樣式，只作用于當(dāng)前組件。這個是怎么做到的呢檬某？
原理
在編譯組件的時候，如果當(dāng)前組件內(nèi)style標(biāo)簽上有scoped屬性螟蝙，那么會在當(dāng)前所有標(biāo)簽上添加一個【data-v-hash】屬性恢恼，而當(dāng)前樣式表內(nèi)的所有末尾選擇器后面也會加上該屬性，那么久使得當(dāng)前組件內(nèi)的樣式只會作用于當(dāng)前組件內(nèi)的元素胰默。
值得注意的是,當(dāng)父組件场斑，子組件同時使用scoped屬性時，子組件最外層的標(biāo)簽既會被加上當(dāng)前組件的hash值牵署，又會加上父級組件的hash值,像這樣
//子組件最外層標(biāo)簽
<div data-v-b45036b2 data-v-384b136e ></div>
問題
在我們用scoped的時候回發(fā)現(xiàn)一個問題漏隐，就是我們在當(dāng)前組件內(nèi)使用的scoped，但是我想在當(dāng)前組件內(nèi)改變子組件的樣式(非最外層標(biāo)簽)奴迅，的時候會發(fā)現(xiàn)不好使
<style scoped>
.father-div .child-div{color:red;}
</style>
因為到了瀏覽器上會解析成
.father-div .child-div[data-v-b45036b2]{color:red;}
而標(biāo)簽上是這樣的
<div data-v-384b136e ></div>
不好使的原因是應(yīng)為父組件內(nèi)樣式內(nèi)解析的是父組件的hash值青责，而子組件內(nèi)標(biāo)簽上添加的是子組件的hash值，對應(yīng)不上當(dāng)然沒效果，那怎么解決呢爽柒？
deep
當(dāng)遇到這種困擾的時候我們可以另寫一個style標(biāo)簽，然后不加scoped屬性者填，來蓋子組件的樣式浩村，當(dāng)前這么寫是可以的，但是不太優(yōu)雅占哟，這時我們可以用到/deep/屬性心墅，
.father-div /deep/ .child-div{color:red;}
當(dāng)遇到"/deep/"的時候會將"/deep/"的位置替換成組件的hash值,解析成
.father-div[data-v-b45036b2] .child-div{color:red;}
這樣只需要注意css的權(quán)重就可以覆蓋子組件內(nèi)的樣式了，
小提示：子組件內(nèi)最外層的樣式由于是帶了父子組件的兩個hash值榨乎，所以是會被兩頭控制的怎燥，不需要/deep/就可以在父組件內(nèi)覆蓋樣式
