Web前端—CSS属性计算过程

CSS 属性计算过程

我们所书写的任何一个 HTML 元素，实际上都有完整的一整套 CSS 样式（该元素上面会有 CSS 所有的属性。）。

• 任何一个 HTML 元素，都有一套完整的 CSS 样式，只不过你没有书写的样式，大概率可能会使用其默认值。
• 总的来讲，属性值的计算过程，分为如下这么 4 个步骤：
  • 确定声明值
  • 层叠冲突
  • 使用继承
  • 使用默认值

1. 确定声明值

• 首先第一步，是确定声明值。所谓声明值就是作者自己所书写的 CSS 样式，例如：

p{
  color : red;
}

这里我们声明了 p 元素为红色，那么就会应用此属性设置。

• 除了作者样式表，一般浏览器还会存在“用户代理样式表”，简单来讲就是浏览器内置了一套样式表。

2. 层叠冲突

在确定声明值时，可能出现一种情况，那就是声明的样式规则发生了冲突。

此时会进入解决层叠冲突的流程。而这一步又可以细分为下面这三个步骤：

• 比较源的重要性
• 比较优先级
• 比较次序

比较源的重要性

当不同的 CSS 样式来源拥有相同的声明时，此时就会根据样式表来源的重要性来确定应用哪一条样式规则。

整体来讲有三种来源：

• 浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称用户代理样式。
• 网页的作者可以定义文档的样式，这是最常见的样式表，称之为页面作者样式。
• 浏览器的用户，可以使用自定义样式表定制使用体验，称之为用户样式。

对应的重要性顺序依次为：页面作者样式 > 用户样式 > 用户代理样式

比较优先级

• 如果是在在同一个源中有样式声明冲突，此时就会进行样式声明的优先级比较。

• 如果源的重要性是相同的，此时会以选择器的权重来比较重要性。

比较次序

• 样式声明既是同源，权重也相同的情况下，就会进入第三个步骤，比较样式声明的次序。

• 此时位于下面的样式声明会层叠掉上面的那一条样式声明，最终应用

至此，样式声明中存在冲突的所有情况，就全部被解决了。

3. 使用继承

• 层叠冲突这一步完成后，解决了相同元素被声明了多条样式规则究竟应用哪一条样式规则的问题。
• 如果没有声明的属性，此时就使用继承而来的值。
• 会继承最近的元素的属性
• 哪些属性能够继承：可以在 MDN 上面查阅到。

4. 使用默认值

一个 HTML 元素要在浏览器中渲染出来，必须具备所有的 CSS 属性值，但是绝大部分我们是不会去设置的，用户代理样式表里面也不会去设置，也无法从继承拿到，因此最终都是用默认值。