【咕笛說vue】把“樣式穿透”原理和方法說透
當我們在vue專案中引用到第三方元件時，比如element-ui,常常需要更改某些元素的樣式，但如果使用常規的css樣式覆蓋的方式是經常無效的，那麼我們就要用到“樣式穿透”的方法。這一節咕笛老師來詳細講解一下這個魔改樣式的大殺招~
在一個元件中，我們定義元件樣式一般寫在頁面的最下方,以style包裹
CSS<style>
.div{
}
</style>為了不汙染全域性樣式，我們在style上加一個scoped修飾符，這個樣式就只在當前元件的範圍內有效
CSS<style scoped>
.div{
}
</style> 但這是如何作到在當前元件範圍內有效的呢？我們開啟F12，檢視一下元素的DOM結構就可以看出端倪：
在每個dom元素上，有一個data-v-xxxxxxxx的識別符號，這個識別符號就是保證scoped有效的根本！我們定位到button上，檢視css樣式：
我們看到元素後面被加上了[data-v-xxxxxxxx]屬性，這也就是CSS的屬性選擇器，只有擁有這個屬性的元素或類才會應用此樣式。每個元件下[data-v-xxxxxxxx]這個id值是一致的，所以限制了其作用範圍。
這個方法是基於PostCss的，關於PostCss可以看其官網的介紹，這裡就不多講了。PostCss官網->
清楚了這個原理之後，我們就可以解釋為什麼很多第三方元件引入進來，通過常規的css樣式覆蓋是無效的，因為該元件是scoped，父元件是觸及不到其內部的樣式的！
那我們要是必須要改變第三方元件的樣式要怎麼辦呢？這裡就要說“樣式穿透”的方法了。
所謂樣式穿透，就是在父級元件中強制去修改子級元件的內部樣式，注意這裡的父子層次並不一定是一級，可能是很多級。
具體要怎麼作呢？按不同的css的渲染器寫法也是不同的。
普通的css語法: 在要修改的樣式前新增>>>符號
CSS.wrapper >>> .el-card__header{
border:none;
}scss語法: 在要修改的樣式前新增 ::v-deep
CSS::v-deep .el-card__header{
border:none;
} sass語法/less語法 :在要修改的樣式前新增 /deep/
CSS.wrap /deep/ .el-card__header{
border:none;
}為啥要有這三種不同的寫法？？因為不同的編譯解析器識別的語法不同，寫錯會報錯。
好了，這一節內容就講到這裡，特別提醒一下，樣式穿透在vue開發中使用的會比較頻繁，但是要注意作用範圍，最好避免全域性下樣式穿透修改元件樣式。