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

目录

一、问题

二、原因

三、解决

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

四、总结

---

一、问题

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

二、原因

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

2.修改样式的方法

 1)html文件

2)css文件

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

2)修改css文件

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

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

 6）如果以上方法尝试后仍然有问题。

      可以尝试将标签  /deep/改成  ::v-deep ,因为 vue3中 /deep/属性不生效。

      如你所见，5）中我使用的是 ::v-deep,因为现在的项目采用 vue3写的。（现发现之前写的有点问题，特来更新）

四、总结

1.deep不能嵌套,不能嵌套，不能嵌套！

2.无论样式结构多深，deep都只能用一次；否则会失效

3.组件内部嵌套自定义组件，修改自定义组件中的多个样式，也只需要使用一次deep即可。

4.仅当你在 style标签中使用了 scoped属性时,/deep/属性才是有用的。

/*

希望对你有帮助！

如有错误，欢迎指正！

*/

--------------------------------------------------答疑-------------------------------------------------------------------------

1.关于 ahaohaoo 提到的： 如果你的style标签中没有scoped属性，那么使用 /deep/选择器定义的任何样式都是无效的 --------------这句话是错的

写的太久了，我也忘记了，刚测试了一下，结果如下：没有scoped时，深度选择器确实不生效(f12检查都找不到设置的样式）。无论style是 css还是sass。

例如：给button中文字设置颜色为 红色

注：虽然样式使用了 :deep(xxx)，但是 /deep/也是同理的，它们都是深度选择器。/deep/也已经测试过了，结果一样，感兴趣的读者，可以自行尝试。

没有加 scoped

sass 添加了scoped

css添加了 scoped