请看如下代码：

#id .item1{
  display:none;
}

.parent .item1{
  display:block;
}

以上两个选择器，都选中了该元素，请问是显示还是不显示？

答案是：不显示。

？？？？不是说，后面的会覆盖前面的吗？这就要扯到一个知识点了：CSS选择器的权重。

在 CSS 中，选择器的权重（specificity）决定了当多个规则应用于同一个元素时，哪个规则会生效。权重是基于选择器类型计算的，并且可以理解为一个四部分的数值系统，通常表示为 (a, b, c, d)，其中：

  • a 表示内联样式的数量（style="..."），这是最高的优先级。
  • b 表示ID选择器的数量。
  • c 表示类、伪类和属性选择器的数量。
  • d 表示元素名称和伪元素选择器的数量。

权重值越大，选择器的优先级越高。

选择器权重

1. 内联样式

直接写在HTML标签内的样式（使用style属性），它们拥有最高的优先级，权重记作(1,0,0,0)。

<p style="color: red;">This text is red.</p>

2. ID选择器

每个ID选择器增加权重中的第二个数字，例如 #header 的权重为 (0,1,0,0)。

#header { color: blue; }

3. 类选择器、伪类选择器和属性选择器

每种类选择器（如 .class）、伪类选择器（如 :hover）和属性选择器（如 [type="text"]）增加权重中的第三个数字。例如，.nav 和 input[type="text"] 各自贡献 (0,0,1,0)。

.nav { color: green; }
input[type="text"] { width: 100%; }

4. 元素选择器和伪元素选择器

每个元素选择器（如 div, p）和伪元素选择器（如 ::before）增加权重中的第四个数字。例如，div 贡献 (0,0,0,1)。

5. 通配符和继承

通配符选择器（*）和其他不包含任何上述信息的选择器权重最低，为 (0,0,0,0)。此外，继承来的样式没有特定的权重，它们只有在没有其他规则应用时才会生效。

权重计算

以开头的css为例

第一条规则：#id .item1

  • 包含一个 ID 选择器（#id），权重为 b = 1。
  • 包含一个 类选择器（.item1），权重为 c = 1。
  • 没有元素选择器或伪元素选择器，权重为 d = 0。

因此，这条规则的优先级为 (0, 1, 1, 0)。

第二条规则：.parent .item1

  • 包含两个 类选择器（.parent 和 .item1），权重为 c = 2。
  • 没有 ID 选择器，权重为 b = 0。
  • 没有元素选择器或伪元素选择器，权重为 d = 0。

因此，这条规则的优先级为 (0, 0, 2, 0)。

优先级比较

  • 第一条规则的优先级为 (0, 1, 1, 0)。
  • 第二条规则的优先级为 (0, 0, 2, 0)。

根据 CSS 的优先级规则，从左到右依次比较：

  1. ID 选择器（b）：第一条规则有 1 个 ID 选择器，第二条规则没有 ID 选择器。因此，第一条规则优先级更高。
  2. 如果 ID 选择器数量相同，则比较类选择器（c）。但在这里，ID 选择器已经决定了优先级。

特殊情况 !important

有一个例外，使用 !important 可以覆盖正常的权重计算规则，强制应用该样式声明。

.special { color: yellow !important; }