浅识深度选折器（/deep/ 或＞＞＞）

之前在开发中遇到一个问题，vue项目结合element ui使用。

但是element ui的样式不一定符合我们的需求，这时我们就需要改变它的样式。

比如博主使用到了element ui的表格，但是表格有默认的背景色，鼠标滑过还有默认的高亮颜色。

我想要改变这个鼠标滑过的样式，所以我需要在页面中审查元素找到对应的标签。

但是当我找到并且复制，然后试图去改变它的样式时，怎么都没办法改变。

我以为是权重的问题，所以我加 ! important，但是也毫无作用。

当我审查元素发现此样式就没有作用到，就相当于它没有找到这个元素，所以也就不存在改不改变样式的问题了。

这时我们就需要一个选择器能深度的帮助我们找到这个元素，比如 deep（划重点）

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

<style scoped>
.a >>> .b { /* ... */ }
</style>
123

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }
1

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。
less使用/deep/

123456

例如：
轮播点这样改为白色是不起作用的

.swiper-pagination-bullet-active{
    background: #fff;
}
123

这个时候就可以用到深度作用选择器

/deep/.swiper-pagination-bullet-active{
    //使用 scoped 后，父组件的样式将不会渗透到子组件中。
    //使用深度作用选择器 /deep/ 或者'>>>' ,但注意像sass、less预处理器不认三个箭头
    background: #fff;
}

1、这是我起初试图改变的方法（亲测无效）：

.el-table--enable-row-hover .el-table__body tr:hover>td {
    background: lightblue !important;
    color: #000;
}

2、这是使用deep后的方法（亲测有效）：

.el-table--enable-row-hover /deep/ .el-table__body tr:hover>td {
    background: lightblue ;
    color: #000;
}

原理就是通过找到父元素深度的找到我们需要改变的子元素，然后改变它的样式即可。

感觉发现了什么不得了的东西。

是不是意味着我使用第三方ui 库，就可以随意改变它的样式了。

好了，以上就是deep的一些基本用法，如需深入了解，请参考官方介绍。