第三讲_css选择器优先级

1. 单个选择器优先级

id 选择器 > 类选择器 > 元素选择器 > 通用选择器

<style>
	* {
		color: red;
	}
	#cid {
		color: green;
	}
	.cclass{
		color: blue;
	}
	div{
		color: pink;
	}
</style>

<div id="cid" class="cclass">
	hello world
</div>

ps：可以注释掉对应的选择器，执行观察结果，非常容易得出上面的优先级结论

2. 组合选择器优先级

组合选择器的优先级需要先计算它的权重，权重的计算结果(x, y, z)，然后比较权重。

权重的计算方式：

• x：id选择器的个数
• y：类选择器、伪类选择器、属性选择器的个数
• z：元素选择器、伪元素选择器的个数

权重的比较方式：

1. 先比较x，x大的优先级高。
2. 如果x相同，再比较y，y大的优先级高。
3. 如果y也相同，再比较z，z大的优先级高。
4. 如果z也相同，比较选择器编写的先后顺序，后面的优先级高。

<style>
/* 下面的 3 个选择器都匹配了相同元素 */

/* 选择器的权重为（0, 0, 2） */
div div {
	color: red;
}

/* 选择器的权重为（0, 1, 1） */
.container div {
	color: green;
}

/* 选择器的权重为（1, 1, 0） */
.container #first-div {
	color: blue;
}
</style>
<div class="container">
	<div id="first-div">hello world</div>
</div>

ps：获取选择器的权重简单方式：vscode中把鼠标放在选择器上，即可得到选择器的权重

3. !important

!important 与优先级无关，当某个样式属性值后面跟了!important，它将覆盖在任何地方声明的该属性。

<style>
/* 选择器的权重为（0, 0, 2） */
div div {
	color: red !important;
}

/* 选择器的权重为（1, 1, 0） */
.container #first-div {
	color: blue;
}
</style>
<div class="container">
	<div id="first-div">hello world</div>
</div>

4. css的特性

4.1 层叠性

如果发生了样式冲突，那就会根据一定规则（选择器优先级），进行样式的层叠。

4.2 继承性

元素自动拥有其父元素或其祖先元素的某些样式，优先继承离得近的。

ps：一般颜色、文本属性等可以继承

4.3 优先级

!important > 行内样式 > id 选择器 > 类选择器 > 元素选择器 > 通用选择器 > 继承的样式