CSS权重问题

在 CSS 中，如果多个选择器应用于同一个元素，那么就需要确定哪个选择器应该优先应用。这就是 CSS 的选择器优先级。

CSS 选择器优先级的计算是基于每个选择器的特定权重值，权重值越高的选择器就越具有优先级。选择器权重的计算方式如下：

• 每个元素选择器的权重为1

标签选择器 （h1,a,div） 和 伪元素选择器 （::before,::after）

• 每个类选择器的权重为10

（属性选择器a[href="https://example.org"]），以及（伪类选择器:first-child）

• 每个ID选择器的权重为100

• 每个内联样式的权重为1000

• 每个!important规则的权重为无穷大

当多个选择器应用于同一元素时，它们的权重将相加以确定优先级。例如，如果一个元素同时具有以下规则：

#nava.active {
  color: red;
}
.nav-link {
  color: blue;
}

那么 #nav a.active 的权重为101（ID选择器的权重为100，加上元素选择器的权重为1），而 .nav-link 的权重为10（类选择器的权重为10）。因此，#nav a.active 的样式将覆盖.nav-link 的样式。

但是，!important规则会覆盖任何其他规则，无论其权重如何。因此，如果一个规则使用了!important，那么它的样式将始终被应用。

需要注意的是，选择器优先级的计算是相对的，只有在比较两个或多个规则应用于同一元素时才有意义。在编写 CSS 时，应该遵循一些最佳实践，例如尽可能避免使用!important，使用更具体的选择器以避免冲突，并使用样式层叠的特性来管理样式的优先级。

后代选择器 ：空格 .box p

子代选择器 ： > article > p

相邻兄弟选择器: +

所有兄弟选择器: ~