使用場景：
已知vue組件編譯后會為template中的每個元素加入[data-v-xxxx]來確保style scoped，即樣式文件僅作用于本組件，而不會去污染全局。那么當(dāng)我們在vue組件中引用了第三方組件庫，如elementUI、antDesign，則編譯后只會在相關(guān)組件的最外層包含[data-v-xxxx]屬性，嵌套的內(nèi)層元素則無該屬性。此時若你想改變內(nèi)層元素的樣式，就會出現(xiàn)無法生效的問題。
如我在template中使用了<ta-input>標(biāo)簽，經(jīng)編譯后效果如圖所示：
image.png
此時我想讓placeholder的文字與input輸入框向右偏移，離左邊圖標(biāo)稍遠(yuǎn)一點(diǎn)，打開開發(fā)者工具，可以看到此處的源代碼如圖：
image.png
若我們增大右邊padding-left的值，會達(dá)到預(yù)期的效果。那我們直接在源碼里加入該樣式，是否有用呢：
.ant-input:not(:first-child) {
padding-left: 30px;
}
令人遺憾的是，編譯后的頁面并不能達(dá)到預(yù)期的效果，在開發(fā)者工具中找原因，會發(fā)現(xiàn)該樣式被vue自動添加了后綴：
image.png
而相應(yīng)的標(biāo)簽是沒有后綴的，所以導(dǎo)致樣式無法應(yīng)用于相應(yīng)的標(biāo)簽。
知道了原因，就可以尋找相應(yīng)對策。我們直到vue給樣式添加后綴是因?yàn)樵趕tyle中添加了scoped屬性，倘若我們?nèi)サ魋coped屬性，會發(fā)現(xiàn)能實(shí)現(xiàn)預(yù)期效果，但此時樣式便不再獨(dú)立作用于該組件，有可能會污染其他組件，因小失大，得不償失。
此時就是本文的主角出場的時候了。只需要在相關(guān)樣式語句前加上
>>>(css)或/deep/(less)，就能實(shí)現(xiàn)樣式穿透。
// css
>>> .ant-input:not(:first-child) {
padding-left: 50px;
}
或者
// less
/deep/ .ant-input:not(:first-child) {
padding-left: 50px;
}
此時vue不會在該樣式后加后綴，就可以達(dá)到預(yù)期要求，同時保證樣式僅作用于該組件。
image.png
image.png
