css的继承性和层叠性、权重计算、important

css的继承性

子元素可以直接继承父元素中会对子元素产生影响的样式属性,所以有些元素没有设置样式,样式也发生了改变的原因

css的层叠性

不同的选择器选择了同一元素,各选择器之间不同的属性是可以叠加的,相同的属性会按照权重进行覆盖

权重的计算

权重:标签=1,类=10,id=100,行(js) = 1000

首先看元素有没有被选中,如果没有被选中,权重为0,如被选中,则计算权重,以权重大的为准,权重一样时后写的为最终样式

important

html 复制代码
<style>
		/*important只作用于当前的属性,强调非常重要,不会被后续的样式覆盖,但不影响当前的权重*/
		div p{
			color: pink;
			font-size: 15px !important;
		}
		.header p{
			color: red;
			font-size: 25px;
			
		}
	</style>
</head>
<body>
	<div class="header">
		<p>段落</p>
	</div>
</body>

上述代码中虽然.header p的权重比div p的权重大,但是div p的font-size属性使用了!important,所以权重大的那个再设置字体大小就不会生效了

相关推荐
梦de天空一米16888 小时前
【一个重复id让游戏卡在62%,聊聊配置表检查】
前端
用户3434612783208 小时前
用户认证系统在高并发下的幂等性与限流策略踩坑实录
css
ryn483988 小时前
01 一个功能模块,怎么分层才不乱
前端·ai编程·claude
Amos_Web8 小时前
通过 Rspack 源码学 Rust(五):读懂 Result 与问号运算符的错误返回
前端
杨航 AI9 小时前
JEV的用法
java·前端·数据库
Amos_Web9 小时前
Rspack 源码解析(三十五):rspack_error 如何用 miette 渲染带源码定位的错误链
前端
去伪存真9 小时前
高敏资产场景下的大模型协同设计架构
前端·agent
修炼的dance9 小时前
OCR预处理测了108组,纠斜去噪有用,坑在顺序和力度
前端
疯华整猫9 小时前
Android 16 后台常驻适配:用 Trae 搭一套“前台服务 + 加急 Job”的可存活架构
前端
不可能片场9 小时前
AI视频成片 帧间差分把拼接缝照出来
前端·electron