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