首页 > 其他分享 >隔离css继承的样式

隔离css继承的样式

时间:2023-07-26 17:36:03浏览次数:32  
标签:initial 隔离 样式 元素 继承 CSS 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。

标签:initial,隔离,样式,元素,继承,CSS,css,属性
From: https://www.cnblogs.com/whh666/p/17583089.html

相关文章

  • css值grid布局基础
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>Document</title&g......
  • GaussDB(for Redis)多租户:读写权限控制和数据库隔离的完美融合
    本文分享自华为云社区《GaussDB(forRedis)企业级特性揭秘之多租户管理》,作者:GaussDB数据库。华为云GaussDB(forRedis)持续完善企业级增强特性,是名副其实的"RedisPlus",其中很经典的企业级特性是多租户能力,支持添加只读账号、读写账号,并且可约束每个账号可访问的数据库(DB)范围......
  • 加入媒体查询后手机端css可以使用,但是电脑端css无效?
    加入媒体查询后手机端css可以使用,但是电脑端css无效?我的写法是这样的 @mediascreenand(max-width:1023px){ .button-module_container__ssMyd2{ width:100%; margin-left:0%; transform:scale(1.1); margin-top:3vw; padding:1.3vw; border-rad......
  • css3新特性笔记之“选择器” .
    http://www.blueidea.com/tech/web/2009/6930_2.asp选择器属性选择器   匹配包含以特定的值开头的属性的元素     匹配包含以特定的值结尾的属性的元素     匹配包含含有特定的值的属性的元素  (1)[att^="value"]匹配包含以特定的值开头的属性的元素(2)[att$......
  • Spire.XLS of.net 怎么设置字体样式(普通单元格和带公式的单元格)
    普通的设置就直接套用官方文档即可//创建字体ExcelFontfont1=workbook.CreateFont();//设置字体,字形,大小,颜色font1.FontName="宋体";font1.IsBold=true;font1.Size=10;font1.KnownColor=ExcelColors.Blue;//为A1单元格......
  • css 伪元素
    CSS伪元素是一项强大的功能,它允许您为所选元素的特定部分设置样式,而无需额外的JavaScript代码。 虽然许多开发人员都熟悉常用的伪元素,如::before和::after,但还有一些其他元素经常被忽视或未得到充分利用。 在本文中,我们将分享9个鲜为人知的CSS伪元素,它们可以增强您的......
  • css案例-after伪类元素的例子
    下位三角例子<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</tit......
  • 02_CSS
    1.CSS1.简介1.是什么CascadingStylesheets,层叠样式表CSS可以用来为网页创建样式表,通过样式表可以对网页进行装饰。所谓层叠,可以将整个网页想象成一层一层的结构,层次高的将会覆盖层次低的,CSS可以分别为网页的各个层次设置样式。2.能做什么修饰美化html网页;外部样式表可以......
  • TailWind CSS工具库使用
    一、简介官方文档本CSS框架本质上是一个工具集,包含了大量类似 flex、 pt-4、 text-center 以及 rotate-90 等工具类,可以组合使用并直接在HTML代码上实现任何UI设计。二、安装介绍VUE项目的相关安装步骤1.安装TailWindCSS通过npm安装tailwindcss和它的相关依......
  • el-input样式修改
    我们在使用第三方提供的开源组件的时候,基本上都会存在修改样式的问题。比如Elementui中的el-input 样式与项目中的不一致,那么就得修改。那应该如何来处理呢?按钮command(mac)进入定义的文件中:找到了“后置元素的class”,然后就可以修改了。<stylelang="scss"scoped>......