CSS 优先级

在编写CSS时，可能会遇到多个样式规则同时作用于同一个元素的情况。这时，浏览器需要决定哪个样式规则最终生效。CSS优先级就是用来解决这种冲突的机制。本文将详细介绍CSS优先级的概念、计算方法以及实际应用场景。

什么是CSS优先级？

CSS优先级是浏览器用来决定哪个样式规则最终应用于元素的规则。当多个样式规则同时作用于同一个元素时，优先级高的规则会覆盖优先级低的规则。理解优先级对于编写高效、可维护的CSS代码至关重要。

优先级的计算

CSS优先级的计算基于选择器的类型和数量。以下是优先级从高到低的顺序：

1. 内联样式：直接在HTML元素中使用style属性定义的样式，优先级最高。
2. ID选择器：使用#id选择器定义的样式。
3. 类选择器、属性选择器和伪类：使用.class、[attribute]、:hover等选择器定义的样式。
4. 元素选择器和伪元素：使用div、p、::before等选择器定义的样式。

提示

通配符选择器（*）、组合选择器（如+、>、~）和否定伪类（:not()）不会影响优先级。

优先级的具体计算

优先级的计算可以看作是一个四位数，分别对应内联样式、ID选择器、类选择器和元素选择器的数量。例如：

• #header .nav a 的优先级为 0,1,1,1（0个内联样式，1个ID选择器，1个类选择器，1个元素选择器）。
• div p 的优先级为 0,0,0,2（0个内联样式，0个ID选择器，0个类选择器，2个元素选择器）。

警告

如果两个选择器的优先级相同，后定义的样式会覆盖先定义的样式。

实际案例

假设我们有以下HTML和CSS代码：

html

<div id="header" class="header">
  <p class="text">Hello, World!</p>
</div>

css

#header .text {
  color: blue;
}

.header .text {
  color: red;
}

p {
  color: green;
}

在这个例子中，#header .text的优先级为 0,1,1,0，.header .text的优先级为 0,0,2,0，p的优先级为 0,0,0,1。因此，#header .text的优先级最高，最终<p>元素的文本颜色为蓝色。

总结

CSS优先级是解决样式冲突的重要机制。通过理解优先级的计算规则，可以更好地控制样式的应用顺序，避免不必要的覆盖和冲突。在实际开发中，合理使用优先级可以提高代码的可维护性和可读性。

附加资源

• MDN Web Docs: CSS Specificity
• CSS Tricks: Specifics on CSS Specificity

练习

1. 编写一个HTML文件，并尝试使用不同的选择器为同一个元素定义样式，观察哪个样式最终生效。
2. 修改上述例子中的选择器，使得.header .text的优先级高于#header .text，并验证结果。

通过以上内容的学习和练习，你应该能够掌握CSS优先级的基本概念和应用方法。继续深入学习CSS的其他特性，提升你的前端开发技能！