CSS篇：优先级比较

2021-05-03 386 阅读2分钟

CSS选择器优先级

一. 什么是优先级？

优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。
浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

二. 优先级是如何计算的？

当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。
优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：
1. 如果存在内联样式，那么 A = 1, 否则 A = 0;
2. B 的值等于 ID选择器 出现的次数;
3. C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;
4. D 的值等于 标签选择器 和 伪元素 出现的总次数。
比较规则是: 从左往右依次进行比较，较大者胜出，如果相等，则继续往右移动一位进行比较。如果4位全部相等，则后面的会覆盖前面的

#nav-list .item {
	color: #f00;
}

.nav-list .item {
	color: #0f0;
}
(0,1,1,0)>(0,0,2,0)

三. 特殊情况

当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。
!important 与优先级无关，但它与最终的结果直接相关。
使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则使得调试找bug变得更加困难了。
当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。
一些经验法则：
- 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
- 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
- 永远不要在你的插件中使用 !important
- 永远不要在全站范围的 CSS 代码中使用 !important