A、 CSS优先级规则
既然有优先级，那么就会有一个规则来约定这个优先级，而这个“规则”就是本次所需要讲的重点。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1. 统计选择符中的ID属性个数。
2. 统计选择符中的CLASS属性个数。
3. 统计选择符中的HTML标记名个数。
最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数
(css2.1是用4位数表示)。( 注意，你需要把数字转换成一个以三个数字
结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字
特性凌驾于较低数字的。
例如：
1. 每个ID选择符(#someid)，加 0,1,0,0。
2. 每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加0,0,1,0。
3. 每个元素或伪元素(:firstchild)等，加0,0,0,1。
4. 其它选择符包括全局选择符*，加0,0,0,0。相当于没加，不过这也是一种specificity，后面会解释。
B、特性分类的选择符列表
以下是一个按特性分类的选择符的列表：
|
选择符 |
特性值 |
|
h1 {color:blue;} |
1 |
|
p em {color:purple;} |
2 |
|
.apple {color:red;} |
10 |
|
p.bright {color:yellow;} |
11 |
|
p.bright em.dark {color:brown;} |
22 |
|
#id316 {color:yellow} |
100 |
单从上面这个表来看，貌似不大好理解，下面再给出一张表：
|
选择符 |
特性值 |
| h1 {color:blue;} | 1 |
| p em {color:purple;} | 1+1=2 |
| .apple {color:red;} | 10 |
| p.bright {color:yellow;} | 1+10=11 |
| p.bright em.dark {color:brown;} | 1+10+1+10=22 |
| #id316 {color:yellow} | 100 |
通过上面，就可以很简单的看出，HTML标记的权重是1,CLASS的权重是10,ID的权重是100，继承的权重为0（后面会讲到）。
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。优先级问题其实就是一个冲突解决的问题，当同一个元素（内容）被CSS选择符选中时，就要按照优先级取舍不同的CSS规则，这其中涉及到的问题其实很多。
说到这里，我们不得不说一下CSS的继承性。
四、CSS的继承性
4.1 继承的表现
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。
样式定义：body {color:#f00;}
举例代码：
CSS继承性的测试
举例效果：
段代码的应用结果是：“CSS继承性的测试”这段话是红颜色的，“继承性”几个字由于应用了标签，所以是粗体。很显然，这段文字都继承了由body {color:#f00;}样式定义的颜色。这也就是为什么说继承性是CSS的一部分。
然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
我们仍以上面的举例代码为例：在样式定义中添加一条：strong {color:#000;}。
举例效果：
发现只需要给加个颜色值就能覆盖掉它继承自的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。
4.2 继承的局限性
继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。
有一些属性不能被继承，如：border, margin, padding, background等。
样式定义：div {border:1px solid #000;}
举例代码：
预期效果：
实际效果：
从上面的效果中，我们可以看出，border是不能被继承的，还有一些其它的属性也是如此，这里就不一一列举。
五、附加说明
1. 文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如
color:green
color:yellow
可以看出，以类选择符方式定义的样式的优先级最低，
其实是类型选择符的，再就是ID选择符，
然后到直接在对象上定义的，
加了! important声明的优先级最高。
提示：如果还有链接外部的CSS，它的优先级是最低的。