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

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

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

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