vue-loader官方文檔的 /deep/ >>> ::v-deep 使用方法

場景：一般我們使用vue和element-ui，在修改第三方組件庫的樣式時候，會修改到頁面不存在的html的標簽樣式，此時就需要使用深度作用選擇器。

注意：

1.腳手架vue-cli搭建的 less默認是不支持 >>> ，但是可用 /deep/ 和 ::v-deep；scss支持 >>>
2.使用/deep/的父標簽后，子標簽直接嵌套寫樣式!important就可以生效了。千萬不能子標簽也寫/deep/，也就是說不能有兩層/deep/。兩層會無效。

標題下文以element-ui的表格el-table為例修改樣式

正常書寫樣式的結果：

1.只有.el-table的生效，因為我們代碼html有el-table。
2.但是 td 和 .cell 設置就無效了。因為這些標簽是在深層我們拿不到。所以設置無效。

使用 /deep/ 書寫樣式的結果：

3.方式1和方式2任意一個都可以。
4.如果不生效 記得在樣式后面加上 !important
5.千萬注意：不能有兩層/deep/嵌套（見下面第三張圖）


下圖是無效的書寫方式：

總的來說就是：我們會在拿不到的標簽設置樣式時候，在前面使用 /deep/ 以及 !important配合使用。 /deep/ 不生效就換成 ::v-deep 或 >>>

總結

以上是生活随笔為你收集整理的/deep/使用方式方式；/deep/无效； ::v-deep和＞＞＞使用；的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。