关注公众号【前端驿站Lite】,一个不止分享前端技术的地方!
前置知识
CSS属性选择器
HTML允许给DOM元素设置属性(<p bg-red>属性</p>)或属性值(<p data=“red”>属性值</p>),通过属性进一步选择元素,修改其样式。
<!DOCTYPE html>
<html>
<head>
<style>
p[bg-red] {
background-color: red;
}
p[fontColor="red"] {
color: red;
}
</style>
</head>
<body>
<p bg-red>文本一</p>
<p fontColor="red">文本二</p>
</body>
</html>
效果如图:
![](https://i-blog.csdnimg.cn/blog_migrate/1729d90c8806db4b11942213b5f7d44c.png)
scoped原理
vue中scoped主要通过postcss实现的,转译代码时postcss做了如下处理:
-
给每个DOM节点添加一个唯一的属性(如:data-v-a0901)
-
在css选择器末尾加上对应的属性选择器(如:.user[data-v-a0901]),来私有化样式
如果组件内包含其他组件,只会给其他组件的最外层标签加上当前组件的data属性
转译前
<style scoped lang="sass">
.example {
color: red;
}
</style>
<template>
<div class="example">scoped测试案例</div>
</template>
转译后
<style scoped lang="sass">
.example[data-v-5558831a] {
color: red;
}
</style>
<template>
<div class="example" data-v-5558831a>scoped测试案例</div>
</template>
这样也就达到了样式模块化的目的。
scoped产生的影响
当我们想去改组件库样式(如elementUI)时,会发现修改不成功了。
<style lang="scss" scoped>
.container{
background: #fff;
.ep-rate{
background: black;
.ep-rate__item{
background: red;
}
}
}
</style>
转译后
.container[data-v-7ba5bd90] { background: #fff; }
.container .ep-rate[data-v-7ba5bd90] { background: black; }
.container .ep-rate .ep-rate__item[data-v-7ba5bd90] { background: red; }
这时候会发现,想要改组件库的样式改不掉了,只改掉了第一层,因为引入其他组件,只会在最外层加上私有属性,所以ep-rate的样式可以修改成功。
![](https://i-blog.csdnimg.cn/blog_migrate/2d316fd0535a545298839094e9cf6d7a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/93c7643dbb6fb0f93f1007df16ac75ee.png)
那在scoped中如何修改组件库样式呢?这就要用到深度选择器了,继续往下看。
vue中深度选择器
deep的原理就是将私有属性移到上一层
<style lang="scss" scoped>
// .container[data-v-7ba5bd90]
.container{
background: #d7d7d7;
// .container .box2[data-v-7ba5bd90]
.box2{
width:100px;
height: 100px;
// .container .box2 .ep-button[data-v-7ba5bd90]
.ep-button{
background: red;
}
// .container .box2[data-v-7ba5bd90] .ep-button
:deep(.ep-button){
background: #00a6ff;
border: none;
}
}
:deep{
// .container[data-v-7ba5bd90] .ep-rate
.ep-rate{
background: #000000;
// .container[data-v-7ba5bd90] .ep-rate .ep-rate__item
.ep-rate__item{
background: #4eff10;
}
}
}
}
</style>
可以看到,加deep深度选择器后,deep内的class都没加私有属性,而是把私有属性提升到了deep的上一层,这样就可以修改组件库样式了。