CSS权重规则

作者:guo-zi-xin

更新于:9 个月前

字数统计:845 字

阅读时长:2 分钟

优先级
浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则
css 权重优先级作用

在同一个元素使用不同的方式，声明了相同的一条或多条 css 规则，浏览器会通过权重来判断哪一种方式的声明，与这个元素最为相关，从而在该元素上应用这个声明方式声明的所有 css 规则。

优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。
而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。
当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

选择器类型
选择器类型有很多种下面的选择器的权重是递增的
1. 类型选择器（元素选择器，如 <div>标签这些）、伪元素选择器（如 ::before， ::after）
2. class选择器(类名选择器) 、伪类选择器（:active, :focus,:hover,:visited这些）、属性选择器（例如[type="radio"]）
3. ID选择器
4. 行内样式
5. !important
- 通过设置元素选择器为1来做对比各种选择器的权重关系
Name 权重数字
元素选择器 1
类/伪类选择器 10
ID选择器 100
行内样式 1000
!important 无穷大，优先生效
!important 例外规则 当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其它声明。虽然，从技术上讲，!important 与优先级无关，但它与最终的结果直接相关。使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则使得调试找 bug 变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。
一些经验法则
1. 一定要优先考虑使用样式规则的优先级来解决问题而不是直接加!important
2. 只有在需要覆盖全占或外部CSS的特定页面中使用!important
3. 不要在你的插件中使用!important
4. 不要在全站范围的CSS代码中使用!important
5. 与其使用!important，你可以：
  - 更好地使用CSS级联属性
  - 使用更具体的规则，在您选择的元素之前，增加一个或多个元素，使选择器变得更加具体，并获得更高的优先级。

Name	权重数字
元素选择器	1
类/伪类选择器	10
ID选择器	100
行内样式	1000
!important	无穷大，优先生效

覆盖important

虽然我们应该尽量避免使用!important，但你应该知道如何覆盖important，加点权重就可以实现

html

<!-- !important 优先级最高， 但也会被权重高的important所覆盖 -->
<div id="aa" class="bb"></div>

css

#a {
  background-color: blue !important; /** id的important会将class的important覆盖掉 */
}
.bb {
  background-color: red !important;
}

CSS权重规则 ​

CSS权重规则