对CSS样式优先级的理解

最新推荐文章于 2024-05-02 21:15:01 发布

夜雨炊烟

最新推荐文章于 2024-05-02 21:15:01 发布

阅读量90

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/Anthony1021/article/details/134417143

版权

概念：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，

选择器相同，则执行层叠性。
选择器不同，就会出现优先级的问题。

权重计算公式

关于CSS权重，我们需要一套计算公式来去计算，这个就是CSS Specificity（特殊性）

标签选择器	计算权重公式
通配符(`*`)	0,0,0,0
标签选择器	0,0,0,1
class类，伪类	0,0,1,0
ID选择器	0,1,0,0
行内样式 `style=“”`	1,0,0,0
`!important`	无穷大

**!important** -> 行内样式 -> ID选择器 -> class选择器 -> 标签选择器 -> 通配符选择器

specificity用一个四位的数，更像四个级别，
值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越

小练习

<head>
		<meta charset="utf-8">
		<title>css优先级</title>
		<style type="text/css">
			div {
				color: red!important;
			}
			.one {
				color: blue;
			}
			div {
				color: #008000;
			}
			#two {
				color: #7FFFD4;
			}
		</style>
	</head>
	<body>
		<div class="one" id="two" style="color: #FFA500">权重还有30s到达战场</div>
	</body>

容器div中内容会根据不同的权重来显示。

权重的叠加

我们经常用交集选择器，后代选择器，是有多个基础选择器组合而成，就会出现权重叠加。

这是一个简单的加法计算：

div ul li --> 0,0,0,3
.nav ul li --> 0,0,1,2
a:hover --> 0,0,1,1

小结：

数位之间没有进制比如说：0,0,0,5+0,0,0,5 = 0,0,0,10 而不是 0,0,1,0 所以不会存在10个div能赶上一个类选择器的情况
继承的权重是 0
如果权重相同，则会根据层叠性，就近原则。
存在两个特殊标签 <a></a>和 <h></h>他们在浏览器有自己默认的样式，继承的权重为0，所以，我们还是要单独给链接和标题一个样式。