CSS 选择器优先级的计算规则详谈

1. CSS 选择器优先级概述

CSS选择器优先级，又称权重，用于确定当多个选择器同时应用于一个元素时，哪个选择器具有更高的优先级，从而决定元素的最终样式。CSS选择器优先级由A、B、C三个等级组成，其中A级最高，C级最低。

2. CSS 选择器优先级计算规则

2.1 A级选择器

A级选择器包括ID选择器，即以井号（#）开头的选择器，例如：

#element {
  color: red;
}

A级选择器的权重为100，这是最高的权重。

2.2 B级选择器

B级选择器包括类选择器、属性选择器和伪类选择器。

2.2.1 类选择器

类选择器是以圆点（.）开头的选择器，例如：

.element {
  color: blue;
}

类选择器的权重为10。

2.2.2 属性选择器

属性选择器是以方括号（[]）开头的选择器，例如：

[type="text"] {
  color: green;
}

属性选择器的权重为10。

2.2.3 伪类选择器

伪类选择器是以冒号（:）开头的选择器，例如：

:hover {
  color: pink;
}

伪类选择器的权重为10。

2.3 C级选择器

C级选择器包括类型选择器和伪元素选择器。

2.3.1 类型选择器

类型选择器是以元素名称开头的选择器，例如：

p {
  color: black;
}

类型选择器的权重为1。

2.3.2 伪元素选择器

伪元素选择器是以两个冒号（::）开头的选择器，例如：

::before {
  content: " ";
}

伪元素选择器的权重为1。

3. CSS 选择器优先级计算实例

3.1 实例 1

以下CSS代码中，哪个选择器具有更高的优先级？

#element {
  color: red;
}

.element {
  color: blue;
}

根据CSS选择器优先级的计算规则，#element选择器具有更高的优先级，因为它是A级选择器，而.element选择器是B级选择器。因此，元素的最终颜色将是红色。

3.2 实例 2

以下CSS代码中，哪个选择器具有更高的优先级？

div:hover {
  color: red;
}

p {
  color: blue;
}

根据CSS选择器优先级的计算规则，div:hover选择器具有更高的优先级，因为它是B级选择器，而p选择器是C级选择器。因此，当鼠标悬停在div元素上时，元素的最终颜色将是红色。