CSS權重是指當多個選擇器應用于同一元素時,瀏覽器按照一定的規則來決定哪個樣式優先級更高從而被應用。CSS權重的值是采用十進制計數法,每個選擇器對于權重數值都有不同的貢獻。以下是不同選擇器對權重的貢獻值:
選擇器 權重 !important 無窮大 行內樣式 1000 ID選擇器 100 類選擇器/屬性選擇器/偽類選擇器 10 元素選擇器/偽元素選擇器 1 通配符/子元素選擇器/兄弟選擇器 0
在 CSS 中,如果存在多個匹配了同一元素的規則,則權重值較高的規則將覆蓋權重值較低的規則。例如,在以下 CSS 樣式表中,樣式 color: red; 會覆蓋 color: blue;。
p { color: blue; } #my-paragraph { color: red; }
因此,在編寫 CSS 樣式表時,要避免過度地使用 !important 和行內樣式,以免損害網站樣式的可維護性。