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

相关推荐
m0_敲代码的彭于晏1684 小时前
Vercel 前端部署平台深度评测
前端
怕浪猫5 小时前
外包和大厂的前端代码,差在凌晨三点
前端·面试·github
m0_敲代码的彭于晏1686 小时前
Vercel 前端部署与全栈开发实战指南
前端·状态模式
徐小夕6 小时前
花了3个月,我们做了一款 AI 版的“飞书文档”
前端·算法·github
贾伟康6 小时前
【化学实验室|17】HarmonyOS ArkTS 亮暗色与视觉令牌实战:集中颜色、间距和交互状态避免页面割裂
前端·移动开发·harmonyos·arkts·arkui
Csvn7 小时前
SSR/SSG/ISR(上):峡谷与渲染策略的时间预算
前端
Csvn7 小时前
SSR/SSG/ISR(下):可交互性、新鲜度与回源账
前端
Elcker9 小时前
YnuoAgent(依诺):一个 npm 包,跑起属于自己的 AI 研发平台
前端·人工智能·npm
计算机魔术师10 小时前
发现2天,修复2个月:AI挖穿PHP后,卡兹克讲透攻防时间差
前端
风骏时光牛马10 小时前
测试标题001
前端