注册
web

CSS样式穿透?你准备好了吗!

cover.png


你是否遇到过这样的情况:想要修改子元素的样式却发现使用父元素选择器无法生效。这时,你就需要了解一下CSS样式穿透的概念。


简单介绍


一般来说,我们可以通过父级选择器来选中它下面的子元素。例如:


.parent .child {
color: red;
}

但是,有些时候我们需要给子元素中特定的元素修改样式,而不是所有的子元素都修改。这时,我们就需要了解CSS样式穿透这个概念。


CSS样式穿透


在CSS中,我们可以使用“/deep/”、“::v-deep”、“::shadow”等方式实现CSS样式的穿透。


使用/deep/


通过使用/deep/关键字,可以达到子组件穿透自身样式的目的。例如:


.parent /deep/ .child {
color: red;
}

这种方式相比于上述普通方法,能够选中更深层次的子元素(即使用多个空格连接的子元素)。但是,由于浏览器对“/deep/”选择器支持并不友好,因此尽量避免使用。


使用::v-deep


在Vue框架中,如果需要穿透组件样式,可以使用::v-deep或者>>>选择器。例如:


.parent ::v-deep .child {
color: red;
}

这种方式只对Vue组件可用,且与/deep/的作用类似。


使用::shadow


在Web Components规范中,定义了Shadow DOM的概念,它能够使得元素的样式隔离开来,不会影响到其它元素。如果我们需要在Shadow DOM中修改样式,可以使用::shadow伪类。


parent::shadow .child {
color: red;
}

这种方式相比较于上述两种方法,更加安全和规范,但需要先了解Shadow DOM的概念。


补充说明


尽管CSS样式穿透能够方便地修改子元素样式,但是在实际开发中还是应当尽可能地避免使用它们。


CSS一直致力于封装样式,降低代码耦合度,而使用CSS样式穿透会将样式的层级深度加深,增加样式的维护成本。


此外,在跨浏览器、跨框架的情况下,CSS样式穿透的表现都不尽相同,因此建议在项目中谨慎使用。


结语


CSS样式穿透虽然能够带来方便,却也需要谨慎使用,遵循代码封装的原则,保持样式的简洁、规范和易维护。


作者:𝑺𝒉𝒊𝒉𝑯𝒔𝒊𝒏𝒈
来源:juejin.cn/post/7238999952553771066

0 个评论

要回复文章请先登录注册