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 或 >>>