CSS優先級是指在多個CSS規則定義了相同的樣式時,瀏覽器按照一定的優先級規則來決定使用哪種樣式。優先級的計算規則是將樣式選擇器分成不同的等級,規定每個等級相應的權值,再計算每個樣式規則的總權值,最終以總權值高低來確定優先級。小編在此為大家介紹一下關于CSS優先級的評測方法。
首先,CSS中ID選擇器的優先級最高,為100分;類選擇器和屬性選擇器的優先級相同,均為10分;標簽選擇器的優先級最低,為1分。當一個標簽使用多個選擇器來定義樣式時,根據選擇器的優先級計算總權值。例如,#id+class會先使用ID選擇器的100分,再加上類選擇器的10分,總權值為110分。如果有兩個樣式規則的總權值相同,則后面的規則將覆蓋前面的規則。
/* 以下是一個例子 */ /* 第一個樣式規則 */ #box { font-size: 14px; color: #333; } /* 第二個樣式規則 */ div#box { font-size: 16px; color: #f00; }
根據上述計算規則,第一個樣式規則的總權值為100+1=101,第二個樣式規則的總權值為100+1+10=111。因此,第二個樣式規則的優先級更高,樣式也將更改。需要注意的是,CSS中使用!important關鍵字可以直接將某個屬性的優先級提高到最高,優先級為1000分,但使用頻率盡量不要過高,以免污染代碼。
總的來說,了解CSS優先級的計算規則可以更好地開發樣式,并且避免一些奇怪的樣式問題。比如出現了某個樣式無法應用或者樣式丟失等問題,都可以通過查看樣式優先級計算結果來找到答案。實踐出真知,多寫代碼,多嘗試,才能做出更好的頁面。
上一篇css優先高級的默認規則
下一篇css優先讀取這個樣式