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,所以权重大的那个再设置字体大小就不会生效了

相关推荐
Data analyse45636 分钟前
rnweb 回放数据量太大怎么办?分片存储与断点续传的实现思路
前端·网络·算法·数据分析
xiaogai_gai1 小时前
金蝶收料通知单查询策略实战教程:从源系统拉取到中间层落地的完整路径
java·前端·数据库
环境栈笔记2 小时前
指纹浏览器 WebRTC 怎么设置?从 ICE 候选、代理出口到功能验证
前端·人工智能·后端·自动化
赵大仁2 小时前
官网性能优化实战:LCP 3.2s → 2.1s、CLS 0.107 → 0,以及被我推翻的 6 个判断
前端·性能优化·cls·lcp·core web vitals
xiancai_xianyu2 小时前
Text2SQL落地生产库前,SQL要过哪三道闸
前端·数据库·sql·sql注入·text2sql·ai agent开发·企业级ai框架
小羊没烦恼!2 小时前
T-SQL查询进阶--理解SQL SERVER中的分区表
服务器·开发语言·前端·javascript·html
史瓦辛格2 小时前
给 DeepSeek Harness 写费用插件:把「这次会话花了多少钱」算准
前端·deepseek
星光不问赶路人3 小时前
Vue 3 + TypeScript 中 enum 的使用实践
前端·vue.js
鸥梨菌Honevid3 小时前
UVM 中 REQ 和 RSP 类型详解:从通信模型到 item_done 与 put_response
java·前端·servlet
IT_陈寒3 小时前
Python多进程共享变量这个坑,差点让我加班到凌晨
前端·人工智能·后端