css

CSS的coped私有作用域和深度选择器

2018-07-26  本文已影响0人  xinhui9056

大家都知道当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。那么他是怎么实现的呢,大家看一下编译前后的代码就明白了:

编译前:

<style scoped>
.example {
  color: red;
}
</style>

编译后:

<style>
.example[data-v-f3f3eg9] {
  color: red;
}

看完你肯定就会明白了,其实是在你写的组件的样式,添加了一个属性而已,这样就实现了所谓的私有作用域。但是也会有弊端,考虑到浏览器渲染各种 CSS 选择器的方式,当 p { color: red } 设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之,比如 .example { color: red },性能影响就会消除。所以,在你的样式里,进来避免直接使用标签,取而代之的你可以给标签起个class名。

如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符:

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

上述代码将会编译成:

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

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

举个栗子

如果想将swiper当前默认蓝色状态改成白色 默认效果

css样式可以可以写

.swiper-pagination-bullet-active{
    background: #fff;
}
看看效果会怎样 重置样式后效果
这个时候就可以用到深度作用选择器
/deep/.swiper-pagination-bullet-active{
    //使用 scoped 后,父组件的样式将不会渗透到子组件中。
    //使用深度作用选择器 /deep/ 或者'>>>' ,但注意像sass、less预处理器不认三个箭头
    background: #fff;
}
使用深度作用选择器后效果
上一篇 下一篇

猜你喜欢

热点阅读