/deep/ 深度作用选择器作用及使用

最新推荐文章于 2024-12-24 11:28:39 发布

原创最新推荐文章于 2024-12-24 11:28:39 发布 · 1.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文介绍了在Vue项目中如何使用/deep/选择器来穿透scoped限制，修改ElementUI组件的样式。当样式不起作用时，问题可能出在选择器权重上。通过实例展示了/deep/的正确用法，以及不同写法对渲染结果的影响，帮助开发者更好地理解和应用深度选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

比如博主使用到了element ui 的对话框，我想要改变这个对话框标题的颜色，所以我需要在页面中审查元素找到对应的标签。

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

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

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

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

vue组件中，在 style 设置为 scoped 的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，可以使用 /deep/ 深度选择器。

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

.focus .el-dialog__title{
  color:red !important
}

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

.focus /deep/ .el-dialog__title{
  color:red;
}

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

若/deep/后有多层嵌套：

/* 渲染前 */
  #app /deep/ button{
    background-color: yellow;
    span{
      color:blue;
    }
  }
/* 渲染后 样式有效 */
#app[data-v-7ba5bd90] button span {
    color: blue;
}

再换种写法移动/deep/位置：

/* 渲染前 */
  #app button{
    /deep/ span{
      color:pink;
    }
  }
/* 渲染后 data-v-7ba5bd90是#app的属性 所以无效 */
#app button[data-v-7ba5bd90] span {
    color: pink;
}

再换一种又加个子元素：

/* 渲染前 */
  #app button{
    span{
      /deep/ span{
        color:pink
      }
    }
  }
/* 渲染后 */
#app button span[data-v-7ba5bd90] span {
    color: pink;
}

综上可以看出.在哪里加的/deep/ ,data属性选择器就会跑到写的上一层去.

若写多个/deep/：

多个/deep/的情况下，只有最外层的/deep/有效，内层的其他/deep/都是无效的，写了也没意义，不建议写。