CSS权重计算

最新推荐文章于 2024-04-08 11:48:36 发布

九阈

最新推荐文章于 2024-04-08 11:48:36 发布

阅读量549

点赞数 3

分类专栏： # CSS 文章标签： css 前端

原文链接：https://blog.csdn.net/weixin_45143481/article/details/104219269

版权

CSS 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

在没有引入权重的概念时，我们对css的优先级认识是这样的
!important>行内样式>ID>类/伪类|属性>标签
排在最前面的优先级越高。
但css是有权重机制的，css的优先级都是根据权重推算出来
如下表格
用四位数字来表示，分别表示四个级别，从左到右不断递减（排在前面的越大）
请添加图片描述
根据上图，我们可以轻易的看出他们的优先级，根据其贡献值（1）的排列位置得出
!important>行内样式>ID>类/伪类|属性>标签
我们来写一下代码，看是否是这样的

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		div {
			/* 0，0，0，1*/
			color:red;
		}
		.color {
			/*0，0，1，0*/
			color:green
		}
		#ches {
			/*0，1，0，0*/
			color:blue;
		}
	</style>
</head>
<body>
	<div id="ches" class="color" style="color:gray">
		测试测试测试测试
	</div>
</body>
</html>

浏览器显示结果，符合我们的上述规则
在这里插入图片描述
根据上面表格我们自动!important的级别最大，测试代码

div {
/* 0，0，0，1*/
color:red!important;	
		}

我们知道标签选择器的权重值最低，但加了!important之后变成了无穷大
在这里插入图片描述
权重叠加
css中权重是可以叠加的，如常见的导航栏布局

li{
	/*0，0，0，1*/
	color:red;
}

在这里插入图片描述
我们知道标签选择器的权重最低，但这里没有比他更大的选择器了，所以正常显示红色，但经过权重叠加后

li{
/*0，0，0，1*/
	color:red;
}
ul li {
    /*权重叠加之后 0，0，0，2*/
	color:green;
}

在这里插入图片描述
由图可见列表变成了绿色，这是因为权重叠加的问题
ul 的权重为 0，0，0，1
li 的权重为 0，0，0，1
两个叠加后：0，0，0，2
所以 ul li选择器优先于li选择器

注意：继承的权重为0

写一个例子，证明继承的权重为0；

.color {
	color:red;
}
<nav class='color'>
	<ul>
		<li>继承过来的权重为0</li>
	</ul>
</nav>

以上代码 li的颜色是什么？答案肯定是红色，li没有设置颜色，先去父元素ul上找，发现也没有设置颜色，最后在父父元素nav应用了颜色，这里是继承过来的颜色，上面我们说了，继承的权重为0
如何验证这句话，很简单，给li标签添加一个颜色；

.color {
	color:red;
}
li {
     color:blue;
}
<nav class='color'>
	<ul>
		<li>继承过来的权重为0</li>
	</ul>
</nav>

猜想一下li会是什么颜色？通过“权重表”我们知道
类的权重值为 0，0，1 ，0
标签的权重值为 0，0，0，1
既然标签的权重值最低，那么优先级肯定是类优先于标签
打开浏览器查看结果
在这里插入图片描述
额。。。好像跟我们猜想的不一样，按照优先级顺序不是应该显示红色吗？
这就验证了“继承的权重为0”这句话，当li继承nav发生了颜色改变，此时的nav权重为 0，0，1，0，但li的权重会变为0；
但我们中又给li单独设置了样式，此时 li的权重为 0，0，0，1
0，0，0，1>0，0，0，0所以结果显示蓝色

接下来练习几到题，巩固一下权重

#father #son{
	color:blue;
}
#father p.c2{
	color:black;
}


div.c1 p.c2{
	color:red;
}
#father{
	color:green !important;
}
//html
<div id="father" class="c1">
    <p id="son" classs="c2"> 猜想一下这行字体是什么颜色 </p>
 </div>

先上结果—蓝色
分析：
1.首先排除红色的选择器，因为类的权重最低，这里又出现了ID
2.或许你会选择绿色，因为有一个!important他的权重最高，但你忘了，继承的权重为0，这里是继承p是继承div的颜色，上面代码肯定有比0高的
3.接下来就只有黑色和蓝色了
蓝色的权重为 0，0，0，2
黑色的权重为0，0，0，1+0，0，0，1，0=0，0，1，1
所以最后结果为蓝色
第二道题

#father {
	color:red;
}
p{
	color:blue;
}
//html
<div id="father" >
   <p> 猜想一下这行字体是什么颜色 </p>
</div>

答案----蓝色
因为继承权重为0
第三道题：

div p {
	color:red;
}
/*权重最低*/
#father{
	color:black;
}
/*权重0*/
p.c2{
	color:blue;
}
//html
<div id="father"  >
    <p class="c2"> 猜想一下这行字体是什么颜色 </p>
</div>

答案—蓝色
1.标签元素权重为0，0，0，1
2.继承权重为 0
3.p.c2的权重为 0，0，0，1+0，0，1，0

第四到题

.c1 .c2 div {
			color:blue;
}
/*权重最低*/
div #box3 {
	color:green;
}
	
#box1 div {
	color:yellow;
}
//html
 <div id="box1" class="c1">
   	    <div id="box2" class="c2">
   	    	<div id="box3" class="c3">
   	    		文字颜色
   	    	</div>
   	    </div>
   </div>

答案–黄色
1.蓝色权重最低
2.绿色和黄色权重一样，按照就近原则
原文链接：
https://blog.csdn.net/weixin_45143481/article/details/104219269

九阈

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS权重计算

答案肯定是红色，li没有设置颜色，先去父元素ul上找，发现也没有设置颜色，最后在父父元素nav应用了颜色，这里是继承过来的颜色，上面我们说了，继承的权重为0。他的权重最高，但你忘了，继承的权重为0，这里是继承p是继承div的颜色，上面代码肯定有比0高的。这就验证了“继承的权重为0”这句话，当li继承nav发生了颜色改变，此时的。黑色的权重为0，0，0，1+0，0，0，1，0=0，0，1，1。3.p.c2的权重为 0，0，0，1+0，0，1，0。0，0，0，1>0，0，0，0所以结果显示蓝色。
复制链接

扫一扫