浅析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的一些基本用法，如需深入了解，请参考官方介绍。

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

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

个人微信公众号：

浅析deep深度选择器相关推荐

css 、 /deep/、::deep 深度选择器
CSS深度选择器简言之简言之在做vue项目的过程中,在style样式中加入 /deep/ 深度选择器更详情内容请点击:https://blog.csdn.net/idomyway/articl ...
Vue3.x 深度选择器（样式穿刺）＞＞＞和 /deep/ 和 ::v-deep 被弃用desprecated
近期笔者使用Vue3 + TS写项目的时候,使用深度选择器发现如下提示 [@vue/compiler-sfc] the >>> and /deep/ combinators have ...
深度选择器 /deep/ ＞＞＞ ::v-deep的用法
css中通常会在 style 标签内添加 scoped 来避免父组件对子组件的影响,添加了之后只能修改当前组件的样式. 这样做的原理是通过在打包的时候给每个样式都添加一个独一无二的hash值,从而避免 ...
vue3.0 深度选择器＞＞＞和 /deep/ 和 ::v-deep 被弃用‘the ＞＞＞ and /deep/ combinators have been deprecated‘
vue3.0+element plus 双汉堡组合,谁用谁知道. 今天改了一个element 的一个样式还是用原来的/deep/编译的时候发现报了如下的警告 [@vue/compiler-sfc] t ...
css深度选择器deep
1.为什么要有deep 1.当我们给组件设置scoped的时候,此时我们组件的css样式只会对自己的内容生效,不会对子组件里面的内容生效. <style lang="scss" ...
Vue 深度选择器:deep()与::v-deep详解
Vue 深度选择器:deep()与::v-deep详解在Vue中,::v-deep 和 :deep() 都用于修改CSS选择器的作用域. 区别在于: :deep() 是一个伪类选择器,可以用于将CS ...
css深度选择器总结
在引入其他UI组件的时候因为要改变其组件的样式一般的选择器是无法改变的因为是使用的 scoped 会有所限制如果要直接修改组件内的样式那么我们需要用到深度选择器 /deep/ /deep/ ...
(Select)解决：Element-ui 中的 Select 组件用(深度)选择器修改默认样式不生效的问题及如何使用 popper-append-to-body=“false“ 属性
1.存在修改默认样式不生效问题的展示: A.问题一:虽然通过深度选择器修改了下拉框的背景等样式问题却没有展示: B.问题二:渲染后的 dom 元素并不在 #app 元素内部: // 发现:修改下拉框默 ...
el-progress进度条深度选择器修改背景色线条渐变色
最近项目中使用到进度条,关于进度条的颜色,ui画的长这样, 这是我一开始画的, 其实element上的进度条实际上长这样我把蓝色这一块改成白色后,发现和底色一样,就看不出进度的效果了,所以随便先调了 ...
/deep/深度作用域选择器
使用 scoped 后,父组件的样式将不会渗透到子组件中. <template lang="html"><div class="header-searc ...

浅析deep深度选择器

浅析deep深度选择器相关推荐

最新文章

热门文章