在CSS中,有時候會出現多個CSS屬性選擇器同時作用于同一個元素的情況,此時就需要確定哪一個屬性具有優先權。下面是CSS屬性優先選擇的規則。
1. !important優先級最高,其后的同一屬性選擇器將被忽略。 2. 行內樣式優先級次之,其次是ID選擇器,類選擇器和標簽選擇器的優先級相同。 3. 通配符選擇器、子選擇器、相鄰兄弟選擇器和一般兄弟選擇器的優先級最低。
舉個例子,假設我們有以下HTML代碼:
<div id="box" class="box">Hello World</div>
同時存在以下CSS代碼塊:
#box {color: red;} .box {color: blue;}
此時,由于ID選擇器的優先級高于類選擇器,因此文字會呈現為紅色。如果修改CSS如下:
.box {color: blue !important;}
則文字將會呈現為藍色。同樣,如果修改CSS如下:
#box {color: green;} .box {color: yellow !important;}
文字將會呈現為綠色,因為ID選擇器的優先級仍然高于類選擇器,并且important優先級高于其他選擇器。
上一篇css居中沒有效果