css选择器优先级深入理解

CSS选择器优先级深入理解

在CSS中，选择器的优先级是指当多个样式规则应用到同一个元素时，浏览器会按照一定的优先级规则来决定应用哪个样式。了解CSS选择器优先级对于编写高效、可靠的CSS样式至关重要。

优先级规则

CSS选择器优先级从高到低排列如下：

1. !important声明：优先级最高的选择器是使用!important声明的，可以覆盖所有其他声明。
2. 内联样式：样式直接在HTML元素的“style”属性中声明，其优先级次于!important。
3. ID选择器：ID选择器的优先级比较高，但比!important和内联样式低。
4. 类选择器、属性选择器和伪类选择器：优先级略低于ID选择器。
5. 元素选择器和伪元素选择器：优先级最低，但可以通过组合使用提高优先级。

在选择器优先级相同的情况下，后定义的样式规则将覆盖先定义的样式规则。

具体的优先级值可以使用计算器来计算，其中，每个选择器对应的优先级值以10为基数：

• 内联样式：1000
• ID选择器：100
• 类选择器、属性选择器和伪类选择器：10
• 元素选择器和伪元素选择器：1

在计算优先级时，将每个选择器对应的优先级值相加即可，如：

#container .list li a {}
/* 优先级: 100 + 10 + 1 = 111 */

.list li a {}
/* 优先级: 10 + 1 + 1 = 12 */

a:hover {}
/* 优先级: 1 + 1 = 2 */

示例

下面是两个示例：

示例一：ID选择器和类选择器

HTML：

<div id="main-content">
  <h1 class="heading">这是一个标题</h1>
  <p class="text">这是一段文本</p>
</div>

CSS：

#main-content .text {
  color: red;
}

.heading {
  color: blue;
}

在上面的示例中，ID选择器的优先级为100，类选择器的优先级为10，因此#main-content .text的优先级高于.heading，所以.text的文本颜色将被设置为红色而不是蓝色。

示例二：内联样式和伪类选择器

HTML：

<a href="#" style="color: red;">点击这里</a>

CSS：

a:hover {
  color: blue;
}

在上面的示例中，内联样式的优先级为1000，伪类选择器的优先级为1，因此即使触发了:hover伪类选择器，文本颜色也将保持为红色。

结论

正确计算选择器的优先级是编写高效、可靠的CSS样式的基础，通过选择器优先级的掌握，可以快速解决样式冲突问题。