css關於/deep/的解釋和用法
我的華仔部落08-05 17:19
/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;}