以前我对css优先级的理解很浅，一直以为id选择器最高，并且当出现class="a b c"时，优先级c>b>a。后来又错误地理解为a、b、c三者的优先级高低是根据出现的先后次序来的，后出现的会覆盖先出现的。为此产生了不少bug。于是今天就来把这个问题给搞清楚了。
在讲css优先级之前，先明确几个重要术语（来自css2.1规范）：
规则集：由选择器和后跟的声明块组成。
声明：即css属性的键值对，比如color: red;就是一个声明。
内联样式：定义在标签元素的style属性中。
内部样式：定义在
如果一个标签元素同时被多个规则集匹配，且其中出现同样的属性时，该如何确定优先级呢？
首先看一张表：
选择器
权重
代码
标签选择器
1
div{}
类选择器
10
.text{}
伪类选择器
10
:hover{}
伪元素选择器
10
:first-line{}
属性选择器
10
[value]{}
id选择器
100
#text{}
内联样式中的声明权重是1000，继承的声明权重是0。
对于上面例子中两个规则集中哪个color声明的优先级高，需要计算它们各自选择器的权重。计算如下：
#header .nav li>a = 100 + 10 + 1 + 1 = 112
.nav-item>a = 10 + 1 = 11
注意，10个标签选择器的权重比1个类选择器的权重低。
可以看出来，声明的权重计算规则就是将其所在规则集的选择器列表中所有选择器对应的权重加起来。那么这里显然#header .nav li>a的权重更高，所以文字最终为红色。
如果两个规则集的权重相同，那么根据就近原则。
知道了css优先级计算规则后，再遇到样式覆盖问题，就能比较好地切入解决了。