CSS选择器优先级

什么是选择器优先级

CSS 选择器优先级是用于确定在多个选择器同时应用于同一元素时，哪一个选择器的样式规则将具有最高的权重并被应用到元素上的一种规则。在 CSS 中，每个选择器都有一个特定的优先级值，这些值决定了哪个规则将覆盖其他规则。

这句话如果不理解也暂且先不管它了。我们可以先看一个例子：

<div id="content" class="content">
  我是什么颜色
</div>

#content {
  color: #f00;
}
.content {
  color: #0f0;
}

那最后文字是什么颜色呢？答案很简单：红色。这就涉及到了优先级问题，同一块内容，我们同时用了 ID选择器 和 类选择器，因为 ID选择器 优先级大于 类选择器 , 所以最终显示为红色。

优先级的计算规则

CSS 选择器的优先级通常按照以下规则进行计算，按重要性递减：

内联 > ID选择器 > 类选择器 > 标签选择器。

上述的规则相信很多人都知道，那 CSS 是怎么确定优先级的呢？

计算规则

优先级是由 A 、B、C、D 的值来决定的，它们的值计算规则如下：

1. 如果存在内联样式，那么 A = 1, 否则 A = 0;
2. B 的值等于 ID选择器 出现的次数;
3. C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;
4. D 的值等于 标签选择器 和 伪元素 出现的总次数 。

比较规则

从左往右依次进行比较 ，较大者胜出，如果相等，则继续往右移动一位进行比较 。如果4位全部相等，则后面的会覆盖前面的。

示例

我们来看一个示例

/* ① */
#nav-global > ul > li > a.nav-link

/* ② */
#nav-global > #nav-link

套用上面的算法，依次求出 A B C D 的值： ①：

1. 因为没有内联样式 ，所以 A = 0;
2. ID选择器总共出现了1次， B = 1;
3. 类选择器出现了1次， 属性选择器出现了0次，伪类选择器出现0次，所以 C = (1 + 0 + 0) = 1；
4. 标签选择器出现了3次， 伪元素出现了0次，所以 D = (3 + 0) = 3;

所以①的优先级可以记作：(0, 1, 1, 3)。

②：按照计算规则，可以得到优先级为：(0, 2, 0, 0)。

按照比较规则可以发现 ② 的优先级更高。

优先级的特殊情况

经过上面的优先级计算规则，我们可以知道内联样式的优先级是最高的，如果外部样式想要覆盖内联样式，就需要 !important 出马了。 在 CSS 中，!important 是一种用于提高样式规则优先级的特殊标记。当一个样式规则被标记为 !important 时，它将具有比其他规则更高的优先级。 使用 !important标记时需要格外谨慎，因为它可能导致样式表的不可预测性和难以维护性。一般来说，最好的做法是避免过度使用 !important，而是尽量采用其他方法来管理样式的优先级，例如合理使用选择器或重构样式表的组织结构。