CSS优先级解析：深入了解决定样式顺序的规则

前端

2024-02-13 22:35:28

什么是CSS优先级？

CSS优先级是一个用于确定相同元素上不同CSS规则的优先级的系统。当元素具有多个CSS规则时，优先级较高的规则将被应用，而优先级较低的规则将被覆盖。

CSS优先级是如何工作的？

CSS优先级基于以下四个因素：

特殊性：特殊性是指CSS规则与特定元素匹配的程度。特殊性越高的规则，优先级越高。特殊性由以下部分组成：
- 元素类型：元素类型的特殊性由其在HTML标记中的顺序决定。例如，<div>元素的特殊性高于<p>元素。
- 类名和ID：类名和ID的选择器具有更高的特殊性。例如，.my-class的选择器具有比.my-class p更高的特殊性。
- 内联样式：内联样式具有最高的特殊性。例如，<p style="color: red;">的选择器具有比.my-class p更高的特殊性。
重要性：重要性是另一个影响CSS优先级的因素。重要性是一个特殊的，可以用来增加CSS规则的优先级。重要性有以下两个值：
- !important：这是一个非常强的值，它会使CSS规则的优先级高于所有其他规则。
- important：这是一个较弱的值，它会使CSS规则的优先级高于具有相同特殊性的其他规则。
顺序：如果两个CSS规则具有相同的特殊性和重要性，则按顺序应用规则。顺序是指CSS规则在样式表中出现的顺序。第一个出现的规则具有更高的优先级。

CSS优先级示例

为了更好地理解CSS优先级，让我们看几个示例：

/* 规则 1 */
div {
    color: red;
}

/* 规则 2 */
.my-class {
    color: blue;
}

/* 规则 3 */
#my-id {
    color: green;
}

/* 规则 4 */
p {
    color: black;
}

/* 规则 5 */
p.my-class {
    color: purple;
}

在这个示例中，规则 3具有最高的特殊性，因为它是ID选择器。规则 5具有次高的特殊性，因为它是类名和元素类型的组合选择器。规则 2具有最低的特殊性，因为它只包含一个类名选择器。

如果我们不考虑重要性，则规则 3将具有最高的优先级，其次是规则 5，然后是规则 2，最后是规则 1 和 4。

但是，如果我们向规则 1 添加!important，则规则 1的优先级将高于所有其他规则。

/* 规则 1 */
div {
    color: red !important;
}

/* 规则 2 */
.my-class {
    color: blue;
}

/* 规则 3 */
#my-id {
    color: green;
}

/* 规则 4 */
p {
    color: black;
}

/* 规则 5 */
p.my-class {
    color: purple;
}