/deep/的意思大概爲深入的，深遠的。無意中看到css中有關於這種寫法，開始沒太注意 ，以爲是組件css的寫法，後來才發現不是。我們都知道Scoped CSS規範是Web組件產生不污染其他組件，也不被其他組件污染的CSS規範。這樣在打包的時候會生成一個獨一無二hash值，這樣父組件的樣式就不會影響到子組件了，然後你要想修改子組件的樣式，一般是提取一個公共文件，在公共文件裏面修改樣式，但是這樣也存在着一個問題，比如你使用了別人的組件或者自己開發一個組件，有時候你修改一處就可能影響到別的地方，這個時候要麼你不用別人的組件，自己重新封裝一個，但很多時候是不太現實的，所以就需要有一個方法或者方式，既不影響到別的地方，又能修改子組件在當前的樣式。 例如我在一個商城的項目使用了mint-ui的radio組件，此時mint-ui已經有默認的樣式了，我可以通過提取公共文件的方式來修改，以達到自己想要的，但是同時其他地方也會受到影響
與此同時我只想要修改這個地方的樣式，在其他頁面用到mint-ui的時候不變，我就可以用/deep/了
.mint-radiolist /deep/ .mint-cell {
height: 1.312rem;
line-height: 1.312rem;
min-height: 1.312rem;
background: #fff;
border-bottom: solid 0.032rem #F2F2F2;
}
.mint-radiolist /deep/ .mint-cell-title {
margin-top: 0.3rem;
}
.mint-radiolist /deep/ .mint-radiolist-label {
font-size: 0.406rem; color: #333333;
}
.mint-radiolist /deep/ .mint-radio-label {
display: inline-block; margin-top: 0.1rem;
}
聲明一下哈 ，如果我在公共文件裏面修改 .mint-cell 的樣式的話就會影響到其他地方，不過像現在這樣 就不會影響到其他地方了。.mint-radiolist[data-v-f60eab44] .mint-radiolist-label [data-v-f60eab44]表示了我子組件使用了scoped哈 當然在一些瀏覽器上可能會出現兼容性問題.mint-radiolist >>> .mint-cell {height: 1.312rem;line-height: 1.312rem;min-height: 1.312rem;background: #fff;border-bottom: solid 0.032rem #F2F2F2;}.mint-radiolist >>> .mint-cell-title {margin-top: 0.3rem;}.mint-radiolist >>> .mint-radiolist-label {font-size: 0.406rem;color: #333333;}.mint-radiolist >>> .mint-radio-label {display: inline-block;margin-top: 0.1rem;} 你也可以加上 >>>
作者：lzksdxh
鏈接：https://juejin.im/post/5a6c89b151882573351a8b74
來源：掘金
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。