CSS中的11个样式选择器与样式优先级计算

1. CSS 选择器

CSS 中有 11 种选择器，分别为：

1. 通用选择器 （*）
2. 元素选择器 （h1, p, div 等）
3. 类选择器 （.class）
4. ID 选择器 （#id）
5. 属性选择器 （[attr=value]）
6. 伪类选择器 （:hover, :active 等）
7. 伪元素选择器 （::before, ::after 等）
8. 后代选择器 （A > B）
9. 子选择器 （A > B）
10. 相邻同胞选择器 （A + B）
11. 通用选择器 （*）

2. 样式优先级

当多个样式规则匹配到同一个元素时，需要根据样式优先级来决定哪个样式规则生效。样式优先级由以下四部分组成：

1. Specificity ：选择器的特异性
2. Importance ：样式规则的重要性
3. Position ：样式规则的位置
4. Order ：样式规则的顺序

Specificity

选择器的特异性是通过计算选择器中各部分的权重来确定的。权重值越大，选择器的特异性就越高。权重值计算如下：

• ID 选择器：100
• 类选择器、伪类选择器和伪元素选择器：10
• 元素选择器和属性选择器：1

如果两个选择器的特异性相同，则比较样式规则的重要性。

Importance

样式规则的重要性可以是以下三个值之一：

• important ：重要
• normal ：普通
• inherited ：继承

如果两个样式规则的重要性相同，则比较样式规则的位置。

Position

样式规则的位置是指样式规则在样式表中的位置。位于后面的样式规则优先级更高。

Order

如果两个样式规则的位置相同，则比较样式规则的顺序。顺序是指样式规则在样式表中出现的顺序。出现的顺序越靠前的样式规则优先级越高。

3. 样式优先级计算示例

以下是一个样式优先级计算的示例：

/* 样式规则 1 */
h1 {
  color: red;
  font-size: 20px;
}

/* 样式规则 2 */
.class {
  color: blue;
  font-size: 15px;
}

/* 样式规则 3 */
#id {
  color: green;
  font-size: 10px;
}

/* 样式规则 4 */
h1.class {
  color: purple;
  font-size: 5px;
}

如果将这四个样式规则应用到一个 <h1 class="class" id="id"> 元素上，则样式优先级最高的样式规则是样式规则 4。这是因为样式规则 4 的选择器的特异性最高，为 110（100 + 10）。样式规则 1 的特异性为 10，样式规则 2 的特异性为 10，样式规则 3 的特异性为 110（100 + 10）。因此，样式规则 4 的优先级最高，样式规则 3 的优先级次之，样式规则 1 的优先级再次之，样式规则 2 的优先级最低。