CSS中的權重是用于確定當多個選擇器應用于同一元素時應使用哪個規則的重要指標。 在推斷權重時,我們需要考慮三個因素:選擇器的數量,選擇器類型以及選擇器所在位置。
選擇器的數量是指在樣式規則中使用了多少選擇器,例如:
/* 權重是1 */ p { color: red; } /* 權重是2 */ #content p { color: green; } /* 權重是3 */ body #wrapper #content p { color: blue; }
在上面的示例中,第一個選擇器的權重為1,第二個選擇器的權重為2,第三個選擇器的權重為3。 選擇器類型是指選擇器的種類,例如:
/* 權重是10 */ #content p { color: red; } /* 權重是1 */ body p { color: green; } /* 權重是0 */ div p { color: blue; }
在上面的示例中,第一個選擇器類型為ID,權重為10,第二個選擇器類型為元素,權重為1,第三個選擇器類型為元素,權重為0。 最后,選擇器所在位置是指選擇器的位置順序,例如:
/* 權重是2 */ body #content p { color: red; } /* 權重是1 */ #content p { color: green; } /* 權重是1 */ p { color: blue; }
在上面的示例中,第一個選擇器最后出現,權重為2,第二個和第三個選擇器出現在相同的位置,權重相同,都為1。
當權重相同的規則都應用于同一元素時,CSS使用以下優先順序:
- 在樣式表中最后定義的規則優先。
- 在樣式表中定義得更早的規則將被瀏覽器忽略。
- 在嵌入式樣式中定義的規則優先于在外部樣式表中定義的規則。
- 在內聯樣式中定義的規則優先于在嵌入式樣式和外部樣式表中定義的規則。
因此,如果您想使某個規則更具體并優先于其他規則,請使用更多的選擇器,更特定的選擇器類型或更具體的選擇器位置。
上一篇css怎么搞按鈕
下一篇css怎么把背景固定