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

相关推荐
泡海椒2 小时前
JQuick-Excel FORMAT 导出格式实战:日期、金额显示与 TRANSFORM 的边界
前端·python·excel
迅猛龙办公室8 小时前
Python输出当前计算机的系统日期和时间
开发语言·前端·python
小狼154548 小时前
浏览器扩展脚本为什么有时候不生效:注入时机、iframe 和单页路由,多多开票助手
前端·chrome
じòぴé南冸じょうげん8 小时前
油猴脚本突然发现变成灰色了,无法使用?页面不生效?刷新页面没反应?
前端
Csvn10 小时前
组合式 API(Composition API)
前端
火柴就是我11 小时前
Android 打包报错 25.0.3
android·前端
BD_Marathon11 小时前
消息对象中字段的说明
java·前端·python
八荒启·交互动画11 小时前
Web特效025—用 Canvas 2D 做Web特效的定义与边界:这支画笔能做到哪一步
前端·webgl·网页特效·八荒启-交互动画·八荒启
Ai-_Man11 小时前
您您这可以把Dola的多个会话比如说。左侧的多个会话一次性导出吗?不是单条会话里面的多次会对话。用AI导出鸭,答案是可以的
开发语言·前端·人工智能·小程序
DsirNg12 小时前
断点不该认识设备:组件布局的容器状态治理
css·前端工程化·组件化·响应式布局·css grid·设计系统·container queries