CSS权重

这篇是基于CSS选择器的，如果对选择器不太了解可以先看另一篇CSS选择器

（一）什么是CSS权重？

• 权重决定了你CSS规则怎样被浏览器解析直到生效，即你的CSS规则是怎样显示的

（二）权重之比

权重顺序 ：!important > 内联 > ID > 类 = 伪类 = 属性 > 标签(元素) = 伪元素 > 通配符

（三）怎么确定权重?

• 权重记忆口诀

• 从0开始：

• 一个行内样式 + 1000；

• 一个ID + 100；

• 一个属性 / 类 / 伪类 + 10；

• 一个元素 / 伪元素 + 1

• NOTE：行内样式，指的是html文档中定义的style

• NOTE：包含选择器的权重为：包含的选择器权重值之和

举例： 
body #content .data img:hover

#content —— id选择器加了 100
.data —— class类选择器加了 10
:hover —— 伪类选择器加了 10
body 、img —— 元素加了 1 

最终的权重值是 0122

按权重值排列

权重值| 选择器
----|----|----
0000|通用选择符 / 子选择符/继承的样式
0001|元素选择器
0010|属性选择器 / 类选择器 /伪类
0100|ID选择器
1000|行内样式

按选择器排列

（四）权重的基本规则

• 1、相同的权重：最后面出现的选择器为最后规则
  假如在外部样式表中，同一个CSS规则你写了两次，那么出现在前面的选择器权重低，你的样式会选择后面的样式

• 2、不同的权重，权重值高则生效
  选择器可能会包含一个或者多个与权重相关的计算点，若经过计算得到的权重值越大，则认为这个选择器的权重高

• 我们可以利用 ID 来增加选择器权重

（五）对权重规则的总结

• 一条样式规则的整体权重值包含四个独立的部分：[A, B, C, D]
• A 表示内联样式，只有 1 或者 0 两个值
• B 表示规则中 ID 的数量
• C 表示规则中除了 ID、标签和伪元素以外的其它选择器数量
• D 表示规则中标签和伪元素的数量
  比较时从高位到低位（从 A 到 D）分别比较，高位相同才需要比较低位

• !important注意点：
• 如果多条规则中都对同一个属性指定了 !important，这时候 !important的作用相互抵销，依然按照ABCD四组计算比较
• !important的作用只有在具有唯一性时才能提现，但是我们永远无法预料自己什么时候又需要覆盖一个已经指定了!important的属性，所以最好的办法就是不要使用

（六）CSS 优先级法则

• A )选择器都有一个权值，权值越大越优先
• B )当权值相等时，后出现的样式表要优于先出现的样式表设置
• C )继承(inherit)的CSS 样式优先级低于指定的CSS 样式
• D )在同一组属性设置中标有“!important”规则的优先级最大

参考文章：
CSS权重
CSS选择器权重值的计算