首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue中的深度作用选择器/deep/

Vue中的深度作用选择器/deep/

作者头像
刘亦枫
发布2020-03-19 17:23:40
2.5K0
发布2020-03-19 17:23:40
举报

在我们使用Vue搭建项目的时候,我们经常会用到一些UI框架,如Element,iView,但是有时候我们又想去修改UI框架的样式,当我们修改样式失败的时候,可以尝试一下/deep/,亲测有效。

那失败的原因是什么呢? UI框架的样式是定义在全局中,我们使用scoped时,局部样式会被全局样式所覆盖(vue默认全局样式覆盖局部样式)。

有多种解决方法,推荐使用/deep/。

当希望scoped样式中的选择器“深入”,即影响子组件,则可以使用>>>组合器,/deep/是它的别名。 有些像 Sass 之类的预处理器无法正确解析 >>>,使用 /deep/ 操作符取而代之。

用法如下:

/deep/ .sg-select-selection {
      border: 1px solid #0095fe;
      background: none;
      .sg-select-selected-value {
        color: #fff;
      }
      > .iconfont {
        color: #0095fe;
      }
    }

也可以写成这种形式:

>>> .sg-select-selection {
      border: 1px solid #0095fe;
      background: none;
      .sg-select-selected-value {
        color: #fff;
      }
      > .iconfont {
        color: #0095fe;
      }
    }

它会解析为:

[data-v-f3f3eg9] .sg-select-selection{
      border: 1px solid #0095fe;
      background: none;
      .sg-select-selected-value {
        color: #fff;
      }
      > .iconfont {
        color: #0095fe;
      }
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档