在 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
相邻兄弟选择器: +
所有兄弟选择器: ~