选择器优先级
当两个规则都作用到了同一个html元素上时,如果定义的属性有冲突,那么应该用谁的值的,这时就需要用到选择器优先级。
看下面几个例子:
html
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>
css
ul {
color: red;
}
li {
color: blue;
}
网页显示:
▪Milk
▪Sausage
html
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>
css
ul#awesome #must-buy {
color: red;
}
.favorite span {
color: blue!important;
}
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
网页显示: ▪Milk
▪Sausage
<ul class="shopping-list" id="awesome"><li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>
ul.shopping-list li .highlight {
color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
color: blue;
}
后代选择器优先于类选择器
网页显示: ▪Milk
▪Sausage