在CSS中,選擇器的權重非常重要。當多個選擇器應用于同一元素時,CSS將計算它們的權重,以確定哪個樣式將應用于元素。
選擇器的權重通常表示為四個數字的序列,例如0, 0, 0, 0
。每個數字對應于選擇器中每個部分的優先級。從左到右,這些部分是:
- 內聯樣式(inline styles) - ID選擇器(ID selectors) - 類選擇器、屬性選擇器和偽類選擇器(class selectors, attribute selectors, and pseudo-class selectors) - 元素選擇器和偽元素選擇器(element selectors and pseudo-element selectors)
權重的計算非常簡單——只需將每個選擇器部件的數字加在一起即可。例如,以下選擇器的權重為0, 0, 1, 1
:
p.intro span
以下是選擇器的權重從高到低的排序
- 內聯樣式:1000 - ID選擇器:100 - 類選擇器、屬性選擇器和偽類選擇器:10 - 元素選擇器和偽元素選擇器:1
下面是另一個例子來解釋這一排序方案:
p.intro span.green
在這個選擇器中,元素選擇器的權重為1,類選擇器的權重為10。因此,這個選擇器的權重為0,0,2,11
通過了解這些權重排序,我們可以在多個樣式規則應用于同一元素時更好地控制程序的行為。
下一篇css選擇器的類型包括