淘先锋技术网

首页 1 2 3 4 5 6 7

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