在CSS中,存在各種不同類型的選擇器和不同類型的屬性,每個選擇器和屬性都有其不同的優先級。當多個屬性在同一個元素中發生沖突時,CSS將根據選擇器和屬性的優先級來確定最終的樣式。
CSS選擇器優先級的計算方式如下:
選擇器類型 優先級值 ------------------------------------------ !important ∞ 行內樣式 (style屬性) 1000 id選擇器 100 類、偽類、屬性選擇器 10 標簽、偽元素選擇器 1 通配符、連結符等 0
這種優先級被稱為“權重”,可以通過將每個選擇器的權重相加來確定哪個規則最終應用到特定的元素中。如果兩個規則的權重相同,則后面的規則將覆蓋前面的規則。
例如:
p { color: red; } .my-class p { color: blue; } #my-id { color: green; }一段文本在一個帶有 .my-class 類的元素中,在一個帶有 id="my-id" 的元素中,這是一行普通文本
在上面的例子中,元素中的文本的顏色將是綠色的,因為ID選擇器具有100的權重,這比類選擇器和標簽選擇器的權重高。類選擇器和標簽選擇器的權重相同,但是兩者都比沒有選擇器的文本塊的權重高,因此帶有 class="my-class" 的文本塊將會是藍色的。
當權重相同時,后面的規則將覆蓋先前的規則。例如:
p { color: red; } p { color: blue; }一個文本塊
在上面的例子中,文本塊的顏色將是藍色的,因為后面的聲明將覆蓋先前的聲明。
最后,使用!important關鍵字可以強制將規則應用于某個元素。這將覆蓋任何其他規則和權重,因此應該盡可能地避免使用它。