HTML中設定多個class屬性的優先順序
阿新 • • 發佈：2019-02-05
問題
在編寫html的過程中，我們會經常為class屬性定義多個值，但是同樣會經常發現自己定義的值無效！！！
以前碰到這種情況我就直接重寫了，或者直接用id設定css屬性，今天想起來好像有些不對哦。。。我必須得去發現真理！！！
<div id="p" class="middle_div padding_10">
<span id="s" class="normal_span"></span>
</div>css定義是這樣的
.padding_10 { background-color:green; } .middle_div { background-color:red; }
結果顯示的是綠色，這給我的第一感覺就是：兩個class的方向反了！
於是我把兩個位置對換，如下
<div id="p" class="padding_10 middle_div">
<span id="s" class="normal_span"></span>
</div>但是結果仍然是綠色的
這。。。。難道是？？？
開啟css檔案一看，果然padding_10在middle_div 前面，然後我把他們倆位置對換，
重新整理瀏覽器，紅色！！！
回顧總結
所以呢，在定義多個class值的時候，一定要注意，把自己最喜歡的樣式放在後面！
但是呢，如果你在padding_10前面加個div（假設父級元素是div），變成div.padding_10，然後你會發現，不管它在哪，我們的p div始終是綠色的，
從這個例子可以看出來，css樣式的優先順序是在載入css檔案的時候就確定下來的（後宣告的樣式優先順序高），而不是由後來html裡class屬性位置前後決定的。
下面有一個直觀的例子
<!DOCTYPE html> <html> <head> <title>Class Priority Test</title> <style type="text/css"> div { margin-top: 5px; color: #fff; } .red-1 { background-color: red; } .green-2 { background-color:green; } .red-3 { background-color:red; } </style> </head> <body> <div class="red-1 green-2"> 初始狀態 red-1 green-2 </div> <div class="green-2 red-1"> 交換class使用順序，green-2 red-1 </div> <div class="green-2 red-3"> 交換class定義順序，green-2 red-3 </div> </body> </html>
class命名規則是 [顏色名]-[定義序號] ，也就是越後定義的序號越大，從下圖的結果可以看出，序號越大（後定義），class的優先順序越高，而與class使用的先後順序無關
