什么是css权重
一个元素有多个样式对他进行设置的时候，那么哪个样式会起作用呢？这就需要一个规则计算，这个规则就是权重。谁的权重大，就使用那个样式。
根据w3c的规范，元素分为三个等级：
- id选择器（称之为
a等级） - 类选择器，属性选择器，伪类(我们称之为
b等级) - 标签，伪元素（我们称之为
c等级）
计算权重
我们按照刚才的规则进行分类计算，计算一下有几个a，几个 b ， 几个 c 。
示例：
body #content .data img:hover
这个按照a,b,c这种格式计算的结果就是：1,2,2。
我们来分析一下。
有1个a： #content 。
有2个b：一个class：.data , 一个伪类：:hover。
有2个 c：body 和 img
那我们再来看几个例子：
// 0,0,2（一个标签，一个伪元素）
li:first-line
// 0,1,1（一个属性选择器，一个标签）
h1 + *[rel=up]
// 1,1,2(一个id选择器，一个类选择器，2个标签)
body #darkside .sith p
使用方法。
现在我们已经知道怎么计算权重了，下一步我们就看看怎么来比较谁的权重大谁的权重小。权重大的样式会起作用。
首先比较第一个等级a ，谁的 a 的个数多权重就大。如果 a的个数一样，则比较 b，跟 a的规则一样，谁的b的个数多，谁的权重就大。如果一样在比较 c。一样的规则。
这样的话，谁的权重大，谁就对元素起作用。
如果最后abc 都一样怎么办，那就比较谁最后写的，一般后面写的会覆盖前面的样式。
比如：
body div{
background: blue
}
div{
background: red;
}
以上两个样式，blue 会起作用。
!important 和 行内样式
除了以上三个等级之外，我们还有另外两个，一个是行内样式，一个是 !important 。
而行内样式 比 ID选择器高一级，!important 比行内样式又高一级。
等级关系
所以最终等级比较是：
!important> 行内样式 > ID选择器 > 类选择器 | 属性选择器| 伪类选择器 > 标签|伪元素
通过上面的方法，我们就可以计算出权重，比较大小。就可以知道那个样式会起作用了。
建议
- 一般不推荐使用
!important，他的等级太高。后期如果对元素有修改很难突破。 - 能不用
id，就尽量不使用。
最后神器
最后推荐一个特别棒的工具，你可以输入选择器，然后计算权重。也可以对多个权重进行排序。
如果不清楚哪个权重更大，使用这个工具可以一目了然，也方便我们对权重的学习。
结语
如果大家发现有什么错误的地方，欢迎指正。希望能给大家带来一点收获。
参考资料：
