CSS优先级（重点）

最新推荐文章于 2024-06-16 17:29:19 发布

原创最新推荐文章于 2024-06-16 17:29:19 发布 · 313 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

15 篇文章

订阅专栏

## 5.3 CSS优先级（重点）

- 概念：

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		/* div{
			color: #FFFF00;
		} */
		
	   /* 组长 */
		div{
			color: #0000FF;
		} 
		
		/* 教育长 */
		div{
			color: #0000FF !important;
		}
		
		/* 班长 */
        .one{
			color: steelblue;
		}
		
		/* 班主任 */
		#two{
			color: crimson;
		}
		
		/* style="color: #0000FF;" 校长*/
	</style>
	<body>
		<div class="one" id="two" style="color:pink;">软件测试</div>
	</body>
</html>

#### 1). 权重计算公式

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

标签选择器	计算权重公式
继承或者 *	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=""	1,0,0,0
每个!important 重要的	∞ 无穷大

- 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
- 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
- div {
color: pink!important;
}

#### 2). 权重叠加

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

就是一个简单的加法计算

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

1. 数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不会存在10个div能赶上一个类选择器的情况。

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
	/* 0011 */
	.nav a {
		color: #FFFF00;
		
	}
	/* 0020 */
	.nav .first{
		color: #FFFFFF;
	}
	
	</style>
	<body>
		<div> 人生四大悲 </div>
		<div class="nav">
			<a href="#" class="first">家里没宽带</a>
			<a href="#">网速不够快</a>
			<a href="#">手机没流量</a>
			<a href="#">学校无wifi</a>
		</div>
	</body>
</html>

#### 3). 继承的权重是0

这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中。

1）如果选中了，那么以上面的公式来计权重。谁大听谁的。
2）如果没有选中，那么权重是0，因为继承的权重为0.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			color: red;
		}
		p {
			color: yellow;
		}
		/*因为demo 没有选p标签，所以 继承的权重为 0*/
		.demo{
			color: blue;
		}
		#test {
			color: pink;
		}
	</style>
</head>
<body>
	<div class="demo" id="test">
		<p>继承的权重为 0</p>
	</div>
</body>
</html>