浅析deep深度选择器

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

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

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

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

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

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

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

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

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 库，就可以随意改变它的样式了。

image

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

博主后期也会了解更新，尽情期待。

如有问题，请指出，接受批评。