在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优先级高于其他选择器。