今天我们来总结一下如何确定 CSS 中选择器的优先级。
选择器特殊性计算规则
- 如果声明来自一个'style'属性而不是一条选择器样式规则，算1，否则就是0 (= a)（HTMl中，一个元素的"style"属性值是样式表规则，这些属性没有选择器，所以a=1，b=0，c=0，d=0）
- 计算选择器中ID属性的数量 (= b)
- 计算选择器中其它属性和伪类的数量 (= c)
- 计算选择器中元素名和伪元素的数量 (= d)
示例
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
<HEAD>
<STYLE type="text/css">
#x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>
上述例子中，p 的颜色将为绿色，因为 style 的层叠规则为3，它的特殊性更高，即优先级更高。
总结
总结起来，CSS 选择器的优先级选择可以认为有如下三点规则：
- 选择器越具体，优先级越高
- 相同优先级情况下，出现在后面的样式会覆盖前面的
- 属性后加
!important的优先级最高，但是谨记要少用
更多的有关属性赋值、层叠和继承的知识可以查看文档。
