隔离css继承的样式
项目里遇到一个富文本在编辑器内和页面上渲染出来的样式不一致的问题,具体表现在fons-size和line-height等可继承的属性上,经过排查发现确实是继承了父元素的样式导致的
随即我在想如何隔离父元素的样式,经过我在张鑫旭的博客里一整翻,终于style:"all: initial;"
解决问题
CSS3的all属性#
all属性实际上是所有CSS属性的缩写,表示,所有的CSS属性都怎样怎样,但是,不包括unicode-bidi和direction这两个CSS属性。
支持三个CSS通用属性值,initial, inherit, unset. 这三个属性值分别表示什么意思呢?
initial#
initial是初始值的意思,也就是,父元素下面所有的第一级子元素都除了unicode-bidi和direction以外的CSS都使用初始值。
inherit#
inherit是继承的意思,也就是,父元素下面所有的相邻子元素都除了unicode-bidi和direction以外的CSS都继承了父元素的CSS。
unset#
unset是取消设置的意思,也就是,article元素下面所有的相邻子元素除了unicode-bidi和direction以外的CSS都干掉都不要,不要了那用什么呢?unset值的特性如下,当前元素浏览器或用户设置的CSS忽略,然后如果是具有继承特性的CSS,如color, 则使用继承值;如果是没有继承特性的CSS属性,如background-color, 则使用初始值。
作者:whh666
出处:https://www.cnblogs.com/whh666/p/17583089.html
版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构