需求描述

重写element-ui 按钮<button>内部嵌套的<span>的样式

无奈用了css内部选择器也无法实现

请教别人以后,发现有以下三种做法

解决办法

  1. App.Vue中使用css内部选择器

不推荐 缺点 代码不符合规范,如果此类需求过多,App.Vue会很乱。 并且 如果使用特性选择器的时候 会很慢;

  1. 删除掉<style scoped> 中的scoped 这样就会生效

不推荐 缺点 同上; 如果没有限制好特定作用域的话 容易产生样式覆盖

  1. 使用Vue 提供的深度选择器

推荐 不会产生上述情况 只对当前作用域生效

    <style scoped>
    .parent >>> .child { /* ... */ }
    </style>

将会编译成:

    .parent[data-v-f3f3eg9] .child { 
        /* ... */ 
    }

而对于less或者sass等预编译,是不支持>>>操作符的,可以使用/deep/来替换>>>操作符,例如:

    .parent /deep/ .child { 
        /* ... */ 
    }

scoped的原理

细心的小伙伴会发现上述代码编译后 会增加[data-v-]的东东,其实Vue就是根据这个确定作用域的,
这也就是scoped的原理

Last modification:April 24th, 2020 at 07:45 pm
如果觉得我的文章对你有用,请随意赞赏