（一）什么是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”规则的优先级最大

作者：莫可可小姐d远方
链接：https://www.jianshu.com/p/08ca24758675
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。