/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;
}
你也可以加上 >>>
才疏學淺，學無止境，望多指教！