之前我们讲到同一类型的选择器暂时这么理解，更精确的说法应该是权重相同的情况下，属性冲突时，冲突的属性以最后一次在代码中出现的位置为准，不同类别的选择器（及不同权重的选择器）呢？本篇就是对不同类别的选择器的显示优先级来展开讲解
选择器的权重（优先级）
通配符"*"选择器 < 标签选择器< 类选择器 < id 选择器 < 行内样式 < 属性值后面加上 "!important"
更专业的说法是把优先级叫做权重，权重也是优先级的意思
为了方便记忆与理解，我们给对应的选择器，给它们标记相应的权重值
| 选择器类型 | 对应的权重值 |
|---|---|
| 通配符选择器 “*” | 0000 |
| 标签选择器 | 0001 |
| 类选择器 | 0010 |
| id选择器 | 0100 |
| 行内样式 | 1000 |
| !important | 无穷大 |
选择器的权重特点
1、权重相同的选择器，按照代码顺序，代码越位于底部，则表现的最终结果就是代码中最后一次出现的样式。
2、同类型的选择器的权重是可以叠加的 ,例如：
我们可以看到虽然 div p 和 p 选择器都是对color属性进行设置，但是，显示的是div p的值，我看到过有些地方的解释是将div 和p的权重值相加，等于2， 大于p的权重值1，因此可以验证一下三个标签在一起的时候：
权重的叠加限定在同类型的选择器，不同类型的选择器的权重就按照上面列的不同类别的选择器权重顺序来。比如对上面的例子，标签选择器不管怎么叠加都没有类选择器的权重高：
为了方便记忆再加入如下的几个例子
| 选择器举例 | 计算过程 | 结果值 |
|---|---|---|
| div p span | 我们分解它们的权重值 0001 + 0001 + 0001 同一级别的权重相加时需要注意的是只在同一级别的位子上相加不产生进位 |
得出它的权重就是 0003 |
| .nav p span | 0010 + 0001 + 0001 | 0012 |
| a:hover | 0001+ 0010 | 0011 |
| .nav a | 0010 + 0001 | 0011 |
| #nav p | 0100 + 0001 | 0101 |
总结：
权重计算每一位计算不产生进位，当我们在比较权重大小的时候，从最左侧的一位开始比较，从第一位开始大的值就可以得出它的权重大，就不用往后面一位进行比较了（其实还是上面咱们说的选择器的权重，权重的叠加只要考虑同类别的选择器就行了）。
