CSS 优先级和权重 - 前端开发

在前端开发中，CSS 是一种用于样式化网页的语言，它可以控制网页的外观和布局。在编写 CSS 样式时，我们可能会遇到多个规则同时应用到同一个元素上的情况。这时，就需要了解 CSS 的优先级和权重机制，以确定哪些规则将会被应用。

CSS 优先级指的是规定哪些规则会被浏览器应用到元素上，而权重则用于比较不同规则的优先级。以下是关于 CSS 优先级和权重的详细解释和示例代码。

1. 选择器的权重

选择器的权重是由各种选择器的特定性决定的。特定性是一个用于判断选择器权重的计算值，它由选择器中的元素类型、类选择器、ID 选择器和内联样式组成，并按顺序计算。具体的规则如下：

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

特定性的计算方式是将选择器中的各个部分分别相乘，并求和。

例如，对于以下选择器：

h1.title#main-heading

• 元素选择器 h1 的特定性为 1。
• 类选择器 .title 的特定性为 10。
• ID 选择器 #main-heading 的特定性为 100。

因此，总的特定性为 111。这意味着具有更高特定性的规则将具有更高的权重。

2. 优先级的计算

当多个样式规则应用于同一个元素时，浏览器将根据选择器的权重来决定最终应用哪个规则。以下是优先级的计算规则：