sass文件中使用深度选择器 /deep/不起作用

琹箐

已于 2022-08-16 14:10:51 修改

阅读量1.5w

点赞数 2

分类专栏：前端文章标签： vue sass

于 2021-09-09 15:31:06 首次发布

本文链接：https://blog.csdn.net/qq_45327886/article/details/120200842

版权

前端专栏收录该内容

77 篇文章 3 订阅

订阅专栏

本文详细介绍了在Vue中使用/deep/和::v-deep深度选择器修改组件样式的问题及解决方案。当style标签包含scoped属性时，需要使用/deep/或::v-deep穿透作用域，确保样式应用到组件内部元素。重点强调了/deep/不能嵌套，且只需使用一次。同时，文章提供了错误排查和vue3中使用::v-deep的注意事项，并给出了实例代码。

摘要由CSDN通过智能技术生成

一、问题

1.想在当前的.vue文件中使用/deep/深度选择器修改第三库引入的组件或自定义组件的样式，但是修改不成功

二、原因

1.自定义组件my-component的结构如下：

<template>
    <div class="outer">
        <div class="inner">
            <div class="content">
                <p>写出有效的代码使我快乐！</p>
            </div>
        </div>
    </div>
</template>

2.修改样式的方法

1)html文件

<my-component class="myStyle"> </my-component>

2)css文件

<style lang="scss" scoped>
.myStyle{
    /deep/ .outer{
        /deep/ .inner{
            /deep/ .content{
                 background:red;
            }
        }
    }
}
</style>

3.自我感觉良好，没有问题，但是就是不起作用。

IDE还提示了我写的css样式的层次，检查以后更是确信自己没有问题。

4.在控制台检查后才发现这个样式根本就没有生效（在浏览器工具中都看不到样式），只有 myStyle这个 class加在了 class为outer的div上面。

5.多次修改后，才发现原因：deep不能嵌套,无论要修改的样式藏得有多深，只需要使用一次deep就可以了。

三、解决

1.使用deep深度选择器的前提

1）仅当你的style标签中使用了 scoped 属性，才需要使用 /deep/选择组件内部的标签。

2）如果你的style标签中没有scoped属性，那么使用 /deep/选择器定义的任何样式都是无效的。直接使用普通的id选择器、类选择器等就可以选择组件内部深层嵌套的标签

2.使用deep深度选择器的基本步骤

1)在使用组件的地方添加一个自定义class

<my-component class="myStyle"></my-component>

2)修改css文件

<style lang="scss" scoped>
.myStyle{

  /deep/ .content{
      background:red
  }
}
<style>

3)问题成功解决，浏览器工具中可以看到添加的样式

4)如果浏览器工具中显示样式被删除，可以使用！important 提高样式的优先级即可

<style lang="scss" scoped>
.myStyle{

  /deep/ .content{
      background:red !important
  }
}
</style>

5)如果你需要同时给嵌套组件内部的多个class添加样式，也只需要使用一次deep即可，deep里面的class正常写即可。

  .form-specimen-collection {
    color: var(--textColorPrimary);
    //只需要在最外层加 v-deep
    ::v-deep .el-col {
      flex-direction: column;
      //里面的按照原有的样式写即可
      //具体实现效果是：第二行文字变成了 红色
      .disabled{
        color:red;
      }
    }
  }