css關於/deep/的解釋和用法

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

你也能夠加上 >>>

才疏學淺，學無止境，望多指教！