详解CSS中的选择器优先级顺序

当多个CSS规则应用于同一元素时，会根据选择器的优先级顺序来决定哪个规则将被应用。本文将详细讲解CSS中的选择器优先级顺序，帮助您更好地理解它们。

实例1：选择器优先级

CSS选择器按照以下顺序计算优先级：

• ID选择器的优先级为100。
• 类选择器、伪类选择器和属性选择器的优先级为10。
• 元素选择器、伪元素选择器和关系选择器的优先级为1。

当有两个及以上规则应用到同一元素时，会按照以下优先级比较顺序决定哪个规则将被应用：

1. 如果一个CSS规则包含一个!important声明，则该规则胜出。
2. 如果两个规则的优先级不同，则优先级高的规则胜出。
3. 如果两个规则的优先级相同，则后面的规则胜出。

实例：

<style>  
    #list li.active {color: red;} /*优先级为101，id选择器加类选择器*/  
    ul>li:last-child a:hover {color: blue;} /*优先级为11，子代选择器加伪类选择器*/  
    li a {color: green;} /*优先级为1，仅有元素选择器*/  
</style>  
<ul id="list">  
    <li class="active"><a href="#">项目1</a></li>  
    <li><a href="#">项目2</a></li>  
    <li><a href="#">项目3</a></li>  
</ul>

以上代码中，id选择器加类选择器的优先级最高，因此“项目1”的颜色为红色。其次是子代选择器加伪类选择器的“项目3”，颜色为蓝色。最后是元素选择器的“项目2”，颜色为绿色。

实例2：设置!important

可以使用!important声明来设置CSS规则的优先级，如下所示：

<style>  
    #list li.active {color: red !important;} /*优先级为1001，id选择器加类选择器，加!important*/  
    ul>li:last-child a:hover {color: blue;} /*优先级为11，子代选择器加伪类选择器*/  
    li a {color: green;} /*优先级为1，仅有元素选择器*/  
</style>  
<ul id="list">  
    <li class="active"><a href="#">项目1</a></li>  
    <li><a href="#">项目2</a></li>  
    <li><a href="#">项目3</a></li>  
</ul>

在“项目1”中，使用了!important声明，使得id选择器加类选择器的优先级已经达到了1001，比第二个规则的优先级要高，因此“项目1”的颜色为红色。

以上就是CSS中选择器优先级顺序的详解，希望能帮助您更好地掌握它们。