/deep/ 深度递归

使用场景:

我们使用/deep/ 深度选择器最主要的使用场景就是 要跨越 scoped 的限制
scoped属性的作用是设置style标签中的样式只对当前组件有效,不对其他组件生效
当有些样式只对father组件中的文字其效果,不对son组件中的文字其效果,原因就是因为scoped限制样式只对father组件起效

简单粗暴的解决方案:
设置样式,如果样式无效,加!importtant 不行就在样式前加/deep/

使用方式

vant中的一些css样式无法修改的问题,尝试加入自己定义的类名 id 甚至加!important都无法更改

方法:在css的类名或id前面加上 /deep/ 深度递归会寻找到到相对应的标签.进行样式的更改

/deep/ .channel-tabs {
    
    
  .van-tab {
    
    
    border-right: 1px solid #edeff3;
    min-width: 200px;
    font-size: 30px;
    color: #777777;
  }

猜你喜欢

转载自blog.csdn.net/code_dream_wq/article/details/127898674