css中显示优先级

在CSS中，每个样式规则都有一个优先级。这个优先级决定了哪些样式规则会被应用于HTML元素。如果多个样式规则应用于同一个元素，优先级就变得十分重要。

CSS中的优先级基于三个不同级别的样式规则：元素选择器、类选择器和ID选择器。以下是这些选择器的优先级，从高到低：

ID选择器 (#my-id)            优先级值为 100
类选择器 (.my-class)         优先级值为 10
元素选择器 (div, p, ul)     优先级值为 1 

如果一个元素匹配了多个选择器，那么它将应用选择器的组合中的最高优先级。

例如，如果有以下规则：

#my-id {
    color: red;
}
.my-class {
    color: blue;
}
p {
    color: green;
} 

并且有以下HTML：

<p id="my-id" class="my-class">Hello World!</p> 

由于ID选择器具有最高优先级，它将覆盖其他两个选择器。这个元素将呈现为红色文本。

如果我们修改HTML，移除id属性：

<p class="my-class">Hello World!</p> 

现在，元素只与类选择器匹配，因为它是最高优先级的。这个元素将呈现为蓝色文本。

如果我们再一次修改HTML，移除p元素的类：

<p>Hello World!</p> 

现在，只有元素选择器匹配这个元素。这个元素将呈现为绿色文本。

优先级的知识对于CSS样式的撰写和调试非常有用。当多个样式规则应用于同一个元素时，它可以帮助你确定哪些规则会最终应用于这个元素。