CSS選擇器的優先級學習

原創

codegeekgao

2020-04-27 23:30

簡介

有時候會遇到多種選擇器對同一元素進行屬性設置，一般項目中也會見到這樣的代碼，如下所示：

那麼問題來了，p元素標籤是顯示什麼顏色呢？結果是紅色，如果不對選擇器優先級有個大致瞭解恐怕很難知道這個元素背景顏色究竟是哪一個。

選擇器的優先級

比較通配與繼承的優先級

效果如下所示：可以看到span標籤繼承了p元素標籤的屬性設置,顯示爲黃色

將css在增加如下設置：

    * {
        background-color: red;
        font-size: 30px;
    }

效果如下所示：可以看到字體大小明顯變大，且背景顏色是紅色覆蓋

這裏可以說明了繼承是優先級最低的，比通配符還要低。
2. 比較元素、通配選擇器的優先級

效果如下所示：可以看到p元素顯示的金黃色而不是紅色，證明了元素選擇器優先級高於通配符選擇器。

3. 元素選擇器與類選擇器比較

顯示效果如下所示：可以看到p標籤顯示的棕色的，由此證明類選擇器優先級高於元素選擇器

4. 類選擇器與id選擇器優先級

實現效果如下所示：可以看到p元素是金黃色，由此可以說明id選擇器優先級高於類選擇器。

然後使用4類選擇器都對p元素進行設置值。