CSS規(guī)定了一些選擇器的優(yōu)先級別,當多個選擇器作用于同一個元素的時候,就需要根據(jù)這些規(guī)定來決定哪一個選擇器會被優(yōu)先應用。下面我們來具體了解一下。
首先,如果在一個樣式表中,使用了相同的選擇器,后面的會覆蓋前面的。
p { color: red; } p { color: blue; }
在這個例子中,所有的p標簽都會應用藍色的顏色。
當然,在一個樣式表中,也可以使用不同的選擇器,如標簽選擇器、類選擇器、ID選擇器、屬性選擇器、偽類選擇器等等。對于這些不同的選擇器,也有不同的優(yōu)先級別。
優(yōu)先級別的計算公式是:用a表示標簽選擇器數(shù)量,用b表示類選擇器、屬性選擇器、偽類選擇器數(shù)量,用c表示ID選擇器數(shù)量,則選擇器的優(yōu)先級別為a × 1 + b × 10 + c × 100。
比如說:
p { color: red; } p.warning { color: blue; } #intro { color: green; }
在這個例子中,p標簽選擇器為1,類選擇器為1,ID選擇器為1,所以p.warning的優(yōu)先級別為1 × 1 + 1 × 10 + 0 × 100 = 11;而#intro的優(yōu)先級別為0 × 1 + 0 × 10 + 1 × 100 = 100。因此,#intro的樣式會覆蓋p.warning的樣式,而p的樣式同樣也會被p.warning的樣式覆蓋。
當有兩個選擇器的優(yōu)先級別相同時,就要看哪個選擇器離被應用的元素更近了。比如說:
#intro p { color: red; } p { color: blue; }
在這個例子中,#intro p和p的優(yōu)先級別都是1 × 1 + 0 × 10 + 1 × 100 = 101,但#intro p離被應用的元素更近,所以會被應用。
以上就是CSS規(guī)定選擇器優(yōu)先級別的一些基本知識,我們在編寫網(wǎng)頁的時候,要根據(jù)這些規(guī)定來合理使用選擇器,避免出現(xiàn)不必要的問題。