css样式穿透（深度选择器）

最新推荐文章于 2025-04-18 11:31:28 发布

仙说

最新推荐文章于 2025-04-18 11:31:28 发布

阅读量3.1w

点赞数 19

分类专栏： css vue 文章标签： css vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_48327767/article/details/124923252

版权

css 同时被 2 个专栏收录

3 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

本文探讨了在使用Vue框架并引入第三方组件库（如Element-UI）时，如何处理样式穿透以修改组件样式的问题。在 scoped 属性存在的情况下，通过>>>、/deep/和::v-deep这三种方式尝试样式穿透，但有时仍无法生效，特别是对于如el-popover这样的组件。解决方案是使用更具体的类选择器，如.el-popover.my-popover，且避免使用scoped属性。文章还提供了一个实际的页面代码和样式代码示例，展示了如何解决此类问题。

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

1、什么情况下使用样式穿透

引入第三方组件库（如element-ui、element-plus），修改第三方组件库的样式
样式文件中使用了 scoped 属性，但是为了确保每个组件之间不存在相互影响所以不能去除

2、样式穿透的三种办法

1. >>>

适用与 css、stylus，不太推荐，可能会有问题
外层类 /deep/ 想要修改类名 {
修改样式
}

2. /deep/

适用于 scss、less
外层类 >>> 想要修改类名 {
修改样式
}

3. ::v-deep

通用，据说可以加快编译速度
::deep 想要修改类名 {
修改样式
}

使用样式穿透还是无效

有时会发现使用了以上方法修改 element 组件样式还是会不生效，
首先打开浏览器控制台的 elements 里面的页面代码，你会发现
在这里插入图片描述
el-popper 是在页面的根文件下，而非组件中
这些组件有：

 <el-popconfirm>  <el-date-picker>  <el-popover>

在这里插入图片描述
页面代码：

                    <el-popconfirm
                      popper-class="popperStyle2"
                      :icon="Warning"
                      icon-color="#4C9FFF"
                      title="确认删除？"
                      @confirm="delPerson(scope.row.id)"
                    >

样式代码：

<style lang="scss" scope>
// el-popover
.popperStyle1 {
  &.el-popper.is-light {
    background: $bg-color;
    border: $input-border;
  }
  &.el-popper[data-popper-placement^=right] .el-popper__arrow::before {
    border: $input-border;
    background: $bg-color;
  }
}
</style>

查看页面效果还是没有生效，去掉 scoped

最终写法是这样, .el-popover.my-popover 这种格式，前缀是.el-popover ，不然不生效。且不能加上scoped