理解層疊樣式表中的層疊機制，精準掌握元素樣式

問題：

在寫CSS時，有時候會遇到瀏覽器中顯示的樣式和本身的預期不符合的狀況，這是由於沒有理解CSS的層疊機制。
例如文檔中有一個p元素,用內聯樣式爲他設置了顏色：

<p class="date" style="color:'#999'">2016年10月20日</p>

在CSS中又用不一樣的方式給他指定了顏色：

p {
    color: #000;
  }
.date {
    color: #FFF;
  }

這三個規則都要控制p元素的顏色，而p元素確定只能有一種顏色，那麼他會選擇哪種呢？

層疊：

層疊就是用來處理這種衝突的一種機制。
他有三大法寶來幫助他完成這個任務：重要度、特殊性、前後順序。

一.重要度

首先決定使用規則的是重要度，層疊採用的重要度次序（序號越小越重要）：

1.標有！important的用戶樣式
2.標有！important的做者樣式
3.做者樣式
4.用戶樣式
5.瀏覽器/用戶代理應用的樣式

重要度更高的規則會覆蓋重要度較低的規則。

2、特殊性

那若是重要度相同呢？像上面的例子那樣，都是普通的做者樣式，他會怎麼處理呢？
這時候就要用到另一個概念，特殊性。更特殊的規則會成爲優勝方。
與樣式來源不一樣，CSS選擇器多種多樣，而且能夠疊加使用，添加樣式的方法也不少（內聯，外部引用，繼承）。因此，爲了更好的衡量一個規則的特殊性，層疊機制爲每一個選擇器和方法都分配了一個數值：

行內樣式：1000
ID選擇器：100
類、僞類、屬性選擇器：10
類型選擇器、僞元素選擇器：1
繼承：0

每一個規則的特殊性就是他包含的選擇器和方式對應的值之和。因此在上面的例子中，p元素的顏色會是 #999.

無論規則多麼複雜，這個法寶都能勝任。
例如：

<div id="calendar">
    <div class="date">
        <p>2016年10月20日</p>
        <p id="time">13:20:00</p>
    </div>
</div>

若是CSS中是這樣寫的，表示時間的p元素的顏色會是#000，由於‘#calendar p’的特殊性爲100+1=101，而‘#time’的特殊性爲100，雖然‘#time’離目標元素更近，但這並非評判標準。

#calendar p{
    color: #000;
}
#time {
    color: #FFF;
}

第二個規則若是換成

.date #time {
    color: #FFF;
}

"13:20:00"的顏色會是#FFF，由於‘.date #time’的特殊性爲10+100=110.

3、前後順序

那麼若是換成這樣呢？

#calendar p{
    color: #000;
}
p#time {
    color: #FFF;
}

這兩個規則的特殊性相同了。這個時候就要用到第三個法寶，前後順序。
由於瀏覽器解析CSS文檔時是自上而下的，因此當前兩個法寶都沒法分清勝負時，靠後面的規則會取勝，因此它的顏色會是#FFF

總結：

有了這三個法寶，層疊機制就能夠處理一切衝突了。清楚地理解了他這三大法寶，咱們就能精準的預測出每一個元素在瀏覽器中的樣式了。

附上一個用於測試的小連接：
https://jsfiddle.net/mamengyi...

參考：《精通CSS》