/deep/的意思大概為深入的，深遠(yuǎn)的。無意中看到css中有關(guān)于這種寫法，開始沒太注意 ，以為是組件css的寫法，后來才發(fā)現(xiàn)不是。我們都知道Scoped CSS規(guī)范是Web組件產(chǎn)生不污染其他組件，也不被其他組件污染的CSS規(guī)范。這樣在打包的時(shí)候會(huì)生成一個(gè)獨(dú)一無二hash值，這樣父組件的樣式就不會(huì)影響到子組件了，然后你要想修改子組件的樣式，一般是提取一個(gè)公共文件，在公共文件里面修改樣式，但是這樣也存在著一個(gè)問題，比如你使用了別人的組件或者自己開發(fā)一個(gè)組件，有時(shí)候你修改一處就可能影響到別的地方，這個(gè)時(shí)候要么你不用別人的組件，自己重新封裝一個(gè)，但很多時(shí)候是不太現(xiàn)實(shí)的，所以就需要有一個(gè)方法或者方式，既不影響到別的地方，又能修改子組件在當(dāng)前的樣式。

深度作用選擇器

如果你希望 scoped 樣式中的一個(gè)選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> 操作符：

<style scoped> .a >>> .b { /* ... */ } </style> 上述代碼將會(huì)編譯成：
.a[data-v-f3f3eg9] .b { /* … */ }

有些像 Sass 之類的預(yù)處理器無法正確解析 >>>。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名，同樣可以正常工作。

1、>>>

如果vue的style使用的是css，那么則

<style lang="css" scoped>
.a >>> .b { 
 /* ... */ 
}
</style>

但是像scss等預(yù)處理器卻無法解析>>>，所以我們使用下面的方式.

2、/deep/

<style lang="scss" scoped>
.a{
 /deep/ .b { 
  /* ... */ 
 }
} 
</style>

但是有些開發(fā)者反應(yīng)，在vue-cli3編譯時(shí)，deep的方式會(huì)報(bào)錯(cuò)或者警告。
此時(shí)我們可以使用第三種方式

3、::v-deep

切記必須是雙冒號(hào)

<style lang="scss" scoped>
.a{
 ::v-deep .b { 
  /* ... */ 
 }
} 
</style>

4.vue3中使用樣式穿透

// Vue 2.0 寫法
  // ::v-deep .carousel-btn.prev {
  //    left: 270px;
  //  }

  // Vue 3.0 更改為以下寫法
:deep(.carousel-btn.prev) {
   left: 270px;
}
:deep(.el-color-picker--small .el-color-picker__trigger) {
  width: 48px;
}

建議使用第三種方式,/deep/在某些時(shí)候會(huì)報(bào)錯(cuò),::v-deep更保險(xiǎn)并且編譯速度更快.
參考文獻(xiàn)：

https://www.cnblogs.com/aidixie/p/13555680.html
https://blog.csdn.net/weixin_33975951/article/details/91420932