deep深度选择器在vue中的使用

使用

deep在vue中的使用方式有三种：

1、/deep/：不推荐使用

2、::v-deep：推荐在vue2中使用

3、:deep()：推荐在vue3.x中使用

4、>>>：不推荐使用

穿透不生效问题排查

1、由于在vue中都是使用scoped，所以要注意类似于el-dialog并不在body中的元素，细看层级是否正确；

2、有些人喜欢在vue2中使用:deep()，但是当:deep()无效时不妨换成::v-deep试试

3、less sass less 中>>>可能会因为无法编译而报错，推荐换成::v-deep或:deep()

4、/deep/ 在vue-cli3中可能会报错，换成::v-deep

5、:deep()无效时试下在最外层加上一个根节点

在拿不到的标签设置样式时候，在前面使用 /deep/ 以及 !important配合使用。 /deep/ 不生效就换成 ::v-deep 或 :deep()。

当你尝试了以上所有方案都无效时，可以考虑下是因为版本问题，vue-loader和vue-style-loader是搭配的，当穿透无效时，可以考虑从版本方向查看:

"vue-loader": "^12.0.0",
"vue-style-loader": "^3.0.0",