/deep/ 深度选择器(通俗易懂)

go_vue

于 2020-09-26 15:01:55 发布

阅读量3.9k

点赞数 3

本文链接：https://blog.youkuaiyun.com/weixin_46409700/article/details/108811936

版权

本文介绍Vue中/deep/深度选择器的用法，当在组件内使用scoped样式时，为使样式能影响到子组件，需使用/deep/深度选择器。通过示例展示如何在less语法中应用此特性。

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

Vue中 /deep/ 深度选择器(通俗易懂)

vue组件中，我们会在style里设置scoped，这个时候在组件里面在写样式是对子组件是没有效果的，如果想让设置的样式对所以子组件都生效，这个时候得使用 /deep/ 深度选择器。

<-- less语法 -->

.box{

  .box1{
  
      background-color:pink;
  }

    /deep/ .box2{

       background-color:red; //对所有子组件生效.

       .box3{   } 

    }

}

注意:没有必要写多层deep