📅 最后修改于: 2023-12-03 15:14:22.255000 🧑 作者: Mango
当编写 CSS 样式表时，很容易出现多个选择器匹配同一个元素的情况。在这种情况下，CSS 样式将按特定的规则级联到一起，以确定最终应用于元素的样式。这些规则组成了 CSS 的级联部分。
CSS 级联是指当发生多个选择器匹配同一个元素时，按照特定规则来组合这些选择器的样式的过程。这些规则被称为级联规则，其中包括选择器特异性和选择器权重等。
选择器特异性是指用于确定选择器应用的权重的一种方式。它是根据选择器的组成元素（元素名称、类、ID、伪类等）来确定的。通常，具有更高特异性的规则将覆盖具有较低特异性的规则。
特异性可以通过下面的简单公式来计算：
a, b, c {
/* 统计元素名称、类和伪类的数量 */
/* 例如：h2 a.selected 是一个类似于 a#some-id:hover 这样的选择器 */
/* 它有两个元素名称（h2 和 a）、一个类和一个伪类 */
/* 因此，它的特异性为 0-2-1-1 */
/* 其中，0 表示 ID 的数量 */
/* 2 表示元素名称的数量 */
/* 1 表示类的数量 */
/* 1 表示伪类的数量 */
/* 注意：在计算特异性时，不需要考虑样式声明或重复的选择器 */
}
/* 示例 */
h2 a.selected {
color: red;
/* 特异性：0-2-1-1 */
}
/* 示例 */
#some-id {
color: blue;
/* 特异性：1-0-0-0 */
}
/* 示例 */
p {
color: green;
/* 特异性：0-0-0-0 */
}
选择器权重是根据选择器文本本身的不同组成部分分配的数字值。通常，具有更高权重的选择器将覆盖具有较低权重的选择器。选择器的权重值通常被表示为四元组（a, b, c, d），其中：
当多个规则应用于同一个元素时，选择器权重将用作解决冲突的一种方式。
假设网站上有以下 HTML 代码：
<!DOCTYPE html>
<html>
<head>
<style>
/* #some-id 选择器的权重为 (1,0,0,0) */
#some-id {
color: blue;
}
/* .some-class 选择器的权重为 (0,0,1,0) */
.some-class {
color: green;
}
/* p 选择器的权重为 (0,0,0,1) */
p {
color: red;
}
</style>
</head>
<body>
<p id="some-id" class="some-class">Hello, world!</p>
</body>
</html>
在这种情况下，<p> 元素被三个选择器匹配：#some-id、.some-class 和 p。根据选择器权重和特异性规则，它的颜色将是红色，因为 p 选择器的特异性和权重均最低。
CSS 的级联部分是一组规则，这些规则确定了当多个选择器和样式表规则应用于同一个元素时，如何组合这些规则以决定实际应用于元素的样式。级联部分包括选择器特异性和选择器权重等。正确理解这些规则对于编写高效、易于维护的 CSS 样式表至关重要。