CSS學習筆記 -- 多重樣式優先順序深入概念
阿新 • • 發佈：2018-11-08
優先順序是瀏覽器是通過判斷哪些屬性值與元素最相關以決定並應用到該元素上的。優先順序僅由選擇器組成的匹配規則決定的。
優先順序就是分配給指定的CSS宣告的一個權重，它由匹配的選擇器中的每一種選擇器型別的數值決定。
優先順序順序
下列是一份優先順序逐級增加的選擇器列表：
- 通用選擇器（*）
- 元素(型別)選擇器
- 類選擇器
- 屬性選擇器
- 偽類
- ID 選擇器
- 內聯樣式
!important 規則例外
當 !important 規則被應用在一個樣式宣告中時,該樣式宣告會覆蓋CSS中任何其他的宣告, 無論它處在宣告列表中的哪裡. 儘管如此, !important規則還是與優先順序毫無關係.使用 !important 不是一個好習慣，因為它改變了你樣式表本來的級聯規則，從而使其難以除錯。
一些經驗法則：
- Always 要優化考慮使用樣式規則的優先順序來解決問題而不是
!important - Only 只在需要覆蓋全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定頁面中使用
!important - Never 永遠不要在全站範圍的 css 上使用
!important - Never 永遠不要在你的外掛中使用
!important
權重計算:
解釋：
- 1. 內聯樣式表的權值最高 1000；
- 2. ID 選擇器的權值為 100
- 3. Class 類選擇器的權值為 10
- 4. HTML 標籤選擇器的權值為 1
利用選擇器的權值進行計算比較，em 顯示藍色，示例如下：https://c.runoob.com/codedemo/3048
<html> <head> <style type="text/css"> #redP p { /* 權值 = 100+1=101 */ color:#F00; /* 紅色 */ } #redP .red em { /* 權值 = 100+10+1=111*/ color:#00F; /* 藍色 */ } #redP p span em { /* 權值 = 100+1+1+1=103 */ color:#FF0;/*黃色*/ } </style> </head> <body> <div id="redP"> <p class="red">red <span><em>em red</em></span> </p> <p>red</p> </div> </body> </html>
CSS 優先順序法則：
- A 選擇器都有一個權值，權值越大越優先；
- B 當權值相等時，後出現的樣式表設定要優於先出現的樣式表設定；
- C 創作者的規則高於瀏覽者：即網頁編寫者設定的CSS 樣式的優先權高於瀏覽器所設定的樣式；
- D 繼承的CSS 樣式不如後來指定的CSS 樣式；
- E 在同一組屬性設定中標有“!important”規則的優先順序最大；示例如下：https://c.runoob.com/codedemo/3049
結果：在Firefox 下顯示為藍色；在IE 6 下顯示為紅色；