CSS 中選擇器優(yōu)先級確定規(guī)則可參考css2.1規(guī)范

一個選擇器的特殊性是根據(jù)下列（規(guī)則）計算的：

• 如果聲明來自一個'style'屬性而不是一條選擇器樣式規(guī)則，算1，否則就是0 (= a)（HTMl中，一個元素的"style"屬性值是樣式表規(guī)則，這些屬性沒有選擇器，所以a=1，b=0，c=0，d=0）
• 計算選擇器中ID屬性的數(shù)量 (= b)
• 計算選擇器中其它屬性和偽類的數(shù)量 (= c)
• 計算選擇器中元素名和偽元素的數(shù)量 (= d)
  特殊性只根據(jù)選擇器的形式來定。特殊的，一個"[id=p33]"形式的選擇器被算作一個屬性選擇器(a=0, b=0, c=1, d=0)，即使id屬性在源文檔的DTD中被定義為"ID"
  4個數(shù)連起來a-b-c-d（在一個基數(shù)很大的數(shù)字系統(tǒng)中（in a number system with a large base））表示特殊性

總結

1. 內(nèi)聯(lián)樣式優(yōu)先級為a
2. 選擇器id屬性優(yōu)先級為 b
3. 選擇器其他屬性和偽類優(yōu)先級為 c
4. 選擇器元素明和偽元素優(yōu)先級為 d
   計算個級別選擇器數(shù)量（a-b-c-d） 數(shù)字大的優(yōu)先級高

實際使用總結：

• 選擇器越具體，優(yōu)先級越高
  例：
  下面例子中 都是給 span設置顏色 ，但是后一條優(yōu)先級高

.parent span{ color:red}       /# 優(yōu)先級（a=0,b=0,c=1,d=1） #/
.parent .number{ color:blue}   /# 優(yōu)先級（a=0,b=0,c=2,d=0） #/
<div class="parent">
      <div class="child">
        <span class="number">456</span>
        <span>123</span>
        
      </div>
</div>

• 相同優(yōu)先級，后面的樣式會覆蓋前面的樣式
  例：
  下面例子中 都是給 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 優(yōu)先級最高，但是要少用
  列：
  !important 優(yōu)先級比內(nèi)聯(lián)樣式要高

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