理解 CSS 样式生效顺序

        在网页开发中，CSS 样式的生效顺序是一个基础且关键的知识点。准确掌握这一规则，能帮助开发者精准控制页面元素的样式呈现。CSS 样式生效顺序遵循先比较重要性，再比较特异性，最后比较源次序的原则。

一、重要性

        重要性是指通过!important声明来提升样式的优先级。无论它们在 CSS 代码中的位置如何，带有!important声明的样式规则，其优先级高于普通样式规则 。

如：

p {
    color: red;
}
p {
    color: blue!important;
}
p {
    color: green;
}

        在上述代码中，由于color: blue!important;使用了!important声明，重要性高于其余两个，所以段落文本最终会显示为蓝色。

注：

重要性由高到低

1、带有 !important 的默认样式表：浏览器自带的默认样式表，当其中的样式带有 !important 声明时，具有最高的重要性。
2、带有 !important 的作者样式表：开发者自己编写的 CSS 样式表中，带有 !important 声明的样式，重要性仅次于带有 !important 的默认样式表。
3、作者样式表：开发者自己编写的 CSS 样式表中的普通样式。
4、默认样式表：浏览器自带的默认样式表中的普通样式。

二、特异性

        特异性是衡量 CSS 选择器匹配元素并应用样式的权重。它通过一个四位数的计算方式来确定，从左到右分别对应内联样式、ID 选择器、类选择器 / 伪类选择器 / 属性选择器、元素选择器 / 伪元素选择器。每使用一个对应类型的选择器，相应位置的数字就加 1。

如：

1、内联样式（特异性 1,0,0,0）：内联样式直接写在 HTML 元素的 style 属性中，它具有最高的特异性权重，因为它直接作用于特定的元素。

<p style="color: red;">这是一段内联样式的文本</p>

        由于内联样式的特异性为1,0,0,0，在所有选择器中特异性较高，所以该段落文本会显示为红色。

2、ID 选择器（特异性 0,1,0,0）：ID 选择器通过 HTML 元素的 id 属性来选择元素，每个 ID 在页面中应该是唯一的，因此它具有较高的特异性。

#myId {
    color: blue;
}

<p id="myId">这是一段ID选择器的文本</p>

        ID 选择器 #myId的特异性为0,1,0,0，高于类选择器、属性选择器、伪类选择器、元素选择器和伪元素选择器，所以该段落文本会显示为蓝色。

3、类选择器 / 伪类选择器 / 属性选择器（特异性 0,0,1,0）：类选择器通过 HTML 元素的 class 属性来选择元素，一个元素可以有多个类，因此它的特异性相对较低。

.myClass {
    color: green;
}

<p class="myClass">这是一段类选择器的文本</p>

        类选择器 .myClass的特异性为0,0,1,0，如果没有更高特异性的样式影响，该段落文本会显示为绿色。

4、元素选择器 / 伪元素选择器（特异性 0,0,0,1）：元素选择器通过 HTML 元素的标签名来选择元素，它的特异性最低。

p {
    color: yellow;
}

        当没有其他更特异性的样式影响时，普通的p元素选择器会使段落文本显示为黄色。

        当重要性相同，不同特异性的样式同时作用于一个元素时，特异性高的样式会覆盖特异性低的样式。如：

p {
    color: yellow;
}
.myClass {
    color: green;
}
#myId {
    color: blue;
}

<p id="myId" class="myClass" style="color:gold">这是一段同时应用多个选择器的文本</p>

        该段落文本最终会显示为金色，因为内联样式 style="color:gold" 的特异性 1,0,0,0 高于 ID 选择器 #myId 的特异性 0,1,0,0 高于类选择器 .myClass 的特异性 0,0,1,0 高于元素选择器 p 的特异性 0,0,0,1。

三、源次序

        在重要性和特异性相同的情况下，源次序起作用，即 CSS 代码中后定义的样式会覆盖先定义的样式。

p {
    color: red;
}
p {
    color: green;
}

        在这段代码中，段落文本会显示为绿色，因为第二个p选择器在源次序上靠后，会覆盖前面p选择器定义的红色样式。

        再看一个综合了重要性、特异性和源次序的复杂例子：

p {
    color: red;
}
.myClass {
    color: green;
}
.myP {
    color: greenyellow;
}
p.myClass {
    color: blue;
}
p.myClass {
    color: yellow!important;
}

<p class="myClass" style="color:aqua">这是一段综合示例的文本</p>

        首先比较重要性，p.myClass { color: yellow!important; } 带有 !important 声明，重要性最高，所以文本会显示为黄色。

        若没有这个带 !important 的样式，那么重要性相同则接着比较特异性，内联样式 style="color:aqua" 的特异性 1,0,0,0 高于 p.myClass 的特异性 0,0,1,1 高于单独的 p 和 .myClass，所以会显示为水蓝色。

        若还没有内联样式，由于 p.myClass 的特异性 0,0,1,1 高于单独的 p（特异性 0,0,0,1）和 .myClass（特异性 0,0,1,0），所以会显示为蓝色。

        要是仅存在 .myP 和 .myClass，它们的特异性都是 0,0,1,0，那么就是重要性相同，特异性相同会依据源次序，后定义的 .myP 会使文本显示为黄绿色。