CSS 优先级规则的细节

CSS 优先级是决定样式被应用的重要标准，当多个样式规则应用到同一个元素时，会按照一定的规则去判断哪些样式规则生效，哪些样式规则被舍弃掉。本篇攻略将详细讲解 CSS 优先级的相关规则和细节。

优先级机制

CSS 优先级按照特定的规则计算，一般来说优先级大的样式规则会覆盖优先级低的样式规则，计算规则如下：

1. !important：样式规则中有使用 !important 标记的，其优先级最高，即使后面的样式规则的权重更大，也无法覆盖前面的样式规则。

2. ID 选择器：权重为 100。

3. 类选择器、伪类选择器和属性选择器：权重为 10。

4. 标签选择器和伪元素选择器：权重为 1。

5. 其他选择器（通配符选择器、继承等）：权重为 0。

细节说明

权重计算

权重计算时，将每个选择器对应的权重数值相加即可，如果某一选择器不存在，则对应的权重数值为 0。

例如：

div p.active {
  color: blue;
  font-size: 14px;
}

p.active {
  color: red;
  font-size: 16px;
}

对于 div p.active 这个选择器，其包含了一个 ID 选择器（权重为 100）和两个标签选择器（权重为 1），所以它的权重是 102。而对于 p.active 这个选择器，其包含了一个标签选择器（权重为 1）和一个类选择器（权重为 10），所以它的权重是 11。

因此，在这个例子中，p.active 这个选择器的样式规则将优先被应用，即字体颜色为红色，字体大小为 16 像素。

继承与优先级

当多个样式规则应用到同一元素时，如果其中有一条是继承属性，那么其优先级会比非继承属性更低。例如：

div {
  font-size: 14px;
}

p {
  color: red;
  font-size: inherit;
}

这个例子中，对于 p 元素来说，字体颜色为红色，字体大小为 14 像素。

通配符选择器

通配符选择器（*）是权重最低的选择器，其权重为 0。但是，如果与其他选择器一起使用，可以覆盖其他选择器。例如：

#sidebar * {
  color: blue;
}

.sidebar a {
  color: red;
}

这个例子中，#sidebar * 样式规则将覆盖 .sidebar a 样式规则，即所有在 #sidebar 内的元素其字体颜色都为蓝色。

结论

在编写 CSS 样式时，要注意样式优先级的问题，了解优先级的计算规则和细节，有助于编写出更准确的样式规则，并避免出现不必要的冲突。建议尽量避免使用 !important 标记，避免给后期维护带来困难。