在CSS中,樣式權(quán)值是用來確定樣式優(yōu)先級的重要指標。當多個選擇器應(yīng)用同一個元素并定義了相同的屬性時,就需要通過權(quán)值來確定哪一個樣式將被應(yīng)用。
通常情況下,當多個選擇器應(yīng)用了相同的CSS屬性,最終應(yīng)用的將是樣式權(quán)值最高的那個選擇器所定義的樣式。
在樣式部分,可以直接給選擇器賦權(quán)值,通過這種方式可以改變選擇器的優(yōu)先級。值越高的選擇器將具有更高的優(yōu)先級。樣式權(quán)值的值可以通過以下方式計算:
選擇器類型 樣式權(quán)值的值 !important Infinity(無窮大) 內(nèi)聯(lián)樣式 1000 ID選擇器 100 類選擇器、屬性選擇器、偽類 10 元素選擇器、偽元素 1 通配符、子選擇器、相鄰選擇器、后代選擇器 0
請注意,!important命令將覆蓋所有權(quán)值,使其具有最高優(yōu)先級。內(nèi)聯(lián)樣式的優(yōu)先級比ID選擇器高,因為ID選擇器的權(quán)值只有100。
以下是樣式權(quán)值優(yōu)先級的幾個示例:
CSS規(guī)則 樣式權(quán)值的值 #main p 101 p.blue 10 #main .blue p 111 p 1 p.blue.green 20
在第一個例子中,#main p選擇器具有ID選擇器(100)的權(quán)值和p元素選擇器(1)的權(quán)值,因此總權(quán)值為101。
在第三個例子中,#main .blue p選擇器具有ID選擇器(100)的權(quán)值,類選擇器(10)的權(quán)值和p元素選擇器(1)的權(quán)值,總權(quán)值為111。因此,這個選擇器的樣式將覆蓋所有其他樣式。
當使用復(fù)雜的選擇器時,記住樣式權(quán)值將根據(jù)各個部分的權(quán)值累加。因此,使用盡可能簡單的選擇器可以避免意外的樣式覆蓋和混亂的CSS。