优先级就是分配给指定的 CSS 声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定。
!important > 行内样式 > ID选择器 > 类选择器=伪类=属性 > 标签 > 通配符 > 继承 > 浏览器默认属性
选择器越具体,其优先级越高
// HTML
<div id="test">
<span>Text</span>
</div>
// CSS
div#test span { color: green; }
div span { color: blue; }
span { color: red; }
无论 CSS 语句的顺序是什么样的,文本都会是绿色的(green),其次蓝色(blue),最后红色(red)。查看Demo
相同优先级,出现在后面的,覆盖前面的
// HTML
<div class="green blue red">
<span>Text</span>
</div>
// CSS
.green {
color: green;
}
.blue {
color:blue;
}
.red {
color:red
}
根据顺序规则,Text 颜色为红色。查看Demo
属性后面加 !important 的优先级最高,但是要少用
//HTML
<p class="better">This is a paragraph.</p>
<p class="better" id="winning">One selector to rule them all!</p>
// CSS
#winning {
background-color: red;
border: 1px solid black;
}
.better {
background-color: gray;
border: none !important;
}
p {
background-color: blue;
color: white;
padding: 5px;
}
两个元素都有 class,第二个元素有 id。border 有 !important。因此,第一个元素为灰色背景无边框,第二个元素红色背景无边框。查看Demo