CSS选择器优先级

选择器优先级

当两个规则都作用到了同一个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