当我们通过多种方式来定义一个样式属性时,浏览器通过以下规则来确定属性值。

继承优先级

继承来的样式越近的优先级越高,自身的样式优先级最高。继承的样式优先级低于选择器定义的样式。

选择器优先级

内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素选择器 = 伪元素选择器 > 通用选择器(*)

  • 当遇到多个约束条件的选择器时,相同优先级的选择器会抵消,然后对比剩下的选择器的优先级。
  • 优先级一样时选择后定义的样式。

!important

!important 可以使一个属性的优先级最高,一般用于覆盖某个样式。以下例子的 .title 本来应该比 #name 低,但 important 使得其优先级更高。

<h1 id="name" class="title">三眼鸭的编程教室</h1>
<style>
    #name {
        color: red;
    }

    .title {
        color: teal !important;
    }
</style>

$$demo

<h1 id="name" class="title">三眼鸭的编程教室</h1> <style> #name { color: red; }

.title {
    color: teal !important;
}

</style>

$$

$$warning

尽量不要使用 !important ,会导致其他开发人员无法覆盖此样式。如果需要覆盖某个样式时应使用优先级更高的选择器。

$$

分值计算法

有一个简单的判断优先级的方法,就是给不同的选择器定一个分值,最后把分值相加。

  • !important :100000
  • 内联样式:10000
  • ID 选择器:1000
  • 类选择器 、 属性选择器 、 伪类选择器 :100
  • 元素选择器 、伪元素选择器:10
  • 通用选择器(*):1
  • 继承的优先级:0
<h1 id="name" class="title red">三眼鸭的编程教室</h1>
<style>
    #name.title {
        /* 分值:1100 */
        color: teal;
    }

    h1.title.red {
        /* 分值:210 */
        color: red;
    }
</style>

$$demo

<h1 id="name" class="title red">三眼鸭的编程教室</h1> <style> #name.title { /* 分值:1100 */ color: teal; }

h1.title.red {
    /* 分值:210 */
    color: red;
}

</style>

$$

$$warning

分值计算法不是一个严谨的计算方法,只是为了方便判断。

比如 20 个类选择器也不会大于 1 个 ID 选择器的优先级,在使用上要谨慎。

$$


练习

  1. 以下文本的颜色是什么?
<div class="container">
    <h1 class="title blue">三眼鸭的编程教室</h1>
</div>
<style>
    div.container .title {
        color: red;
    }

    h1.title.blue {
        color: blue;
    }
</style>
  1. 以下的 :hover 样式起效吗?为什么?
<h1 class="title red">三眼鸭的编程教室</h1>
<style>
    h1.title.red {
        color: red;
    }

    .title:hover {
        color: green;
    }
</style>

$$answer

不起效,因为 .title:hover 优先级低于 h1.title.red 的优先级,

$$