CSS级联样式表的优先级顺序|极客教程

CSS级联样式表的优先级顺序

CSS（层叠样式表）是一种用于描述网页上的元素如何呈现的样式语言。在CSS中，使用样式表来控制网页的外观和布局。当多个样式作用于同一个元素时，就会出现样式的冲突，这时就需要了解CSS的优先级顺序，以确定哪一个样式会被应用到元素上。

1. CSS选择器

在了解CSS的优先级顺序之前，我们需要先了解CSS的选择器。CSS选择器用于选择要应用样式的元素。不同的选择器有不同的权重，这决定了该选择器的优先级。

常见的CSS选择器包括：

元素选择器：选择元素的类型，如p、h1等。
类选择器：选择带有特定类的元素，以.开头，如.container。
ID选择器：选择具有特定ID的元素，以#开头，如#header。
子选择器：选择特定元素的子元素，用>连接符。
伪类选择器：根据元素的状态选择元素，如:hover、:active等。

2. CSS级联样式表的优先级顺序

当多个样式作用于同一个元素时，CSS会根据样式的优先级来确定哪一个样式会被应用到元素上。CSS的优先级顺序依次为：

!important：!important关键字具有最高的优先级，如果样式设置了!important，那么无论其他选择器的权重如何，都会被应用。
行内样式：写在元素标签的style属性中的样式会覆盖外部样式表中的样式。
ID选择器：ID选择器的优先级比元素选择器和类选择器高。
类选择器/属性选择器/伪类选择器
元素选择器/伪元素选择器
通配符选择器：通配符选择器的优先级是最低的。

下面我们通过示例代码来演示CSS的优先级顺序：

<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        background-color: red;
    }
    p {
        color: blue;
    }
    #header {
        color: green;
    }
</style>
</head>
<body>
    <div class="box" id="header" style="color: orange;">This is a box</div>
    <p>This is a paragraph</p>
</body>
</html>

在这段示例代码中，我们定义了一个类选择器.box，一个元素选择器p，和一个ID选择器#header。并在HTML中应用了一个行内样式style="color: orange;"。

按照CSS的优先级顺序来看，应用到.box元素上的样式会是什么颜色呢？根据上面的优先级顺序，!important > 行内样式 > ID选择器 > 类选择器/属性选择器 > 元素选择器/伪元素选择器 > 通配符选择器。因此，最终.box元素的文本颜色会是orange，而不是red、blue或green。