css中样式优先级 |css层裁切

CSS 样式规则可以分为以下四个级别：

1. 浏览器默认样式（用户代理样式）
2. 标签（元素）级样式
3. 类级样式和伪类级样式
4. ID 级样式和行内样式

这四个级别中，优先级从大到小依次递减。

优先级计算的规则如下：

1. 如果样式规则中包含 !important，则直接应用该规则，不再考虑其他的规则。
2. 根据选择器中包含的 ID 属性值的个数计算优先级值，ID 属性值出现的次数越多，优先级越高。例如 #header 就比 #header a 优先级高。
3. 对于同级别的样式规则，根据选择器中包含的类、伪类和元素名称的个数计算优先级值。类和伪类的个数越多，优先级越高。
4. 对于同级别的样式规则，如果选择器中包含了相同名称的元素，则以后面选择器的优先级高。
5. 如果以上所有规则都不足以区分优先级，则以最后指定的样式规则为准。即如果同一个元素应用了多个样式规则，那么最后一个样式规则的属性值将被应用。

以下是一个示例，包含不同优先级的样式规则：

/* 浏览器默认样式 */
p {
color: black;
}
/* 标签级样式 */
div p {
color: red;
}
/* 类级样式 */
.big-text {
font-size: 24px;
}
/* 伪类级样式 */
a:hover {
color: blue;
}
/* ID 级样式 */
#header {
background-color: gray;
}
/* 行内样式 */
Hello World!

这里的样式规则中包含了浏览器默认样式、标签级样式、类级样式、伪类级样式、ID 级样式和行内样式。假设大家有一段 HTML 代码如下：

<div id="header">
<p class="big-text"><a href="#">Hello World!</a></p>
</div>

那么根据上述优先级计算的规则，这段 HTML 内容的样式如下：

/* ID 级样式最高，所以 “background-color: gray;” 被应用 */
#header {
background-color: gray;
}
/* 类级样式的优先级高于标签级样式，所以 “font-size: 24px;” 被应用 */
.big-text {
font-size: 24px;
}
/* 标签级样式的优先级低于类级样式，所以 “color: red;” 被应用 */
div p {
color: red;
}
/* 伪类级样式的优先级低于类级样式，所以 “color: blue;” 被应用 */
a:hover {
color: blue;
}
/* 行内样式的优先级仅次于 !important，所以 “color: green;” 被应用 */
Hello World!
/* 浏览器默认样式的优先级最低，所以它不会被应用 */
p {
color: black;
}

知道了 CSS 样式规则优先级的计算方法，可以更好地为 HTML 元素应用样式，确保样式规则被正确地应用。如果需要更改一个元素的样式，那么修改样式规则的优先级就是一个有效的方法。