CSS 属性的计算过程与层叠规则

在网页开发中，CSS 属性的计算过程对于准确呈现页面样式至关重要。下面我们来详细了解 CSS 属性值是如何一步步确定的。

一、从简单示例说起

先看一个简单的代码示例：

<p>这是一个段落。</p>

p {
  color: red;
}

在这段代码里，虽然我们只设置了 color 属性，但实际上每个元素都有一组默认的属性值。通过浏览器的 Elements > Computed 面板可以查看这些默认值。

属性值的计算顺序

CSS 属性值的计算主要分为以下四个步骤：

1. 确定声明值

当在样式表中为某个元素书写样式声明时，这个声明的值会被用作 CSS 属性值。

h1 {
  font-size: 20px; /* 覆盖默认的 32px */
}

2. 层叠冲突

当多个样式声明针对同一属性时，层叠规则决定最终的 CSS 属性值。

div p {
  color: blue;
}
p {
  color: red;
}

在这种情况下，div p 的选择器优先级更高，因此 p 元素的颜色为蓝色。

3. 继承

如果某个属性没有在元素上设置，浏览器会尝试从父元素继承该属性值。

div {
  color: red;
}

p 元素会继承 div 的 color 属性值，变为红色。

4. 默认值

如果既没有设置样式，也无法继承，浏览器会使用默认样式。

层叠规则

CSS 是 Cascading Style Sheets 的缩写，层叠（cascade）是其核心概念。选择器的优先级由以下因素决定：

• 重要性：!important 声明优先。
• 专用性：ID 选择器 > 类选择器 > 元素选择器。
• 源代码次序：后出现的规则覆盖前面的。

重要性

!important 可以让规则优先于其他规则，但应谨慎使用，以免增加调试难度。

专用性

专用性通过选择器的类型和数量来衡量：

• 千位：内联样式
• 百位：ID 选择器
• 十位：类、属性、伪类选择器
• 个位：元素、伪元素选择器

源代码次序

如果选择器的优先级和重要性相同，后出现的规则会覆盖前面的。

p {
  color: red;
}
p {
  color: blue; /* 最终颜色 */
}

继承规则

某些属性会被子元素继承。CSS 提供了四种特殊的通用属性值来处理继承：

• inherit：继承父元素的属性值。
• initial：使用浏览器默认值。
• unset：重置为自然值。
• revert：恢复为自定义样式或用户代理默认样式。

继承的就近原则

属性值会继承离自己最近的元素的属性。

.two {
  color: blue;
}
.one {
  color: red;
}

在上面的示例中，.two 比 .one 更接近 p，所以 p 的颜色为蓝色。