CSS 中选择器优先级确定规则可参考css2.1规范

一个选择器的特殊性是根据下列（规则）计算的：

• 如果声明来自一个'style'属性而不是一条选择器样式规则，算1，否则就是0 (= a)（HTMl中，一个元素的"style"属性值是样式表规则，这些属性没有选择器，所以a=1，b=0，c=0，d=0）
• 计算选择器中ID属性的数量 (= b)
• 计算选择器中其它属性和伪类的数量 (= c)
• 计算选择器中元素名和伪元素的数量 (= d)
  特殊性只根据选择器的形式来定。特殊的，一个"[id=p33]"形式的选择器被算作一个属性选择器(a=0, b=0, c=1, d=0)，即使id属性在源文档的DTD中被定义为"ID"
  4个数连起来a-b-c-d（在一个基数很大的数字系统中（in a number system with a large base））表示特殊性

总结

1. 内联样式优先级为a
2. 选择器id属性优先级为 b
3. 选择器其他属性和伪类优先级为 c
4. 选择器元素明和伪元素优先级为 d
   计算个级别选择器数量（a-b-c-d） 数字大的优先级高

实际使用总结：

• 选择器越具体，优先级越高
  例：
  下面例子中 都是给 span设置颜色 ，但是后一条优先级高

.parent span{ color:red}       /# 优先级（a=0,b=0,c=1,d=1） #/
.parent .number{ color:blue}   /# 优先级（a=0,b=0,c=2,d=0） #/
<div class="parent">
      <div class="child">
        <span class="number">456</span>
        <span>123</span>
        
      </div>
</div>

• 相同优先级，后面的样式会覆盖前面的样式
  例：
  下面例子中 都是给 span设置颜色 ，但是后一条会覆盖前面的样式

.parent span{ color:red}      
.parent span{ color:blue}   
<div class="parent">
      <div class="child">
        <span class="number">456</span>
        <span>123</span>
        
      </div>
</div>

• 属性后面加!important 优先级最高，但是要少用
  列：
  !important 优先级比内联样式要高

div>span{
  color:greenyellow !important;
}
<div>
  <span>123</span>
  <span style="color:red">123</span>
</div>