属性值计算过程

一个 CSS 属性的计算值是指这个属性在由父类转向子类的继承中的值。它通过指定值计算出来:

一、确定声明值

首先，需要遍历参考样式表，查找与特定 CSS 属性相关且无冲突的声明。这些声明所指定的值将作为该属性的初始候选值。例如，在一个样式表中可能存在如下无冲突的声明：

body {
  color: #333;
}

这里的 #333 就是 color 属性的一个声明值。

二、层叠冲突

当样式表中存在针对同一 CSS 属性的冲突声明时，就需要运用层叠规则来确定最终的属性值。层叠规则主要从以下三个方面进行比较：

1. 比较重要性

用户代理样式表与作者样式表：

用户代理样式表（如浏览器默认样式）通常具有较低的优先级。
而作者在自定义样式表中定义的样式优先级更高。
例如，浏览器默认可能会给段落设置一定的字体样式，但如果开发者在自己的样式表中重新定义了段落的字体样式，那么将以开发者定义的为准。

!important 声明：在作者样式表中，如果某个声明被标记为 !important，则该声明会获得极高的优先级。不过，过度使用 !important 会破坏样式的可维护性，应谨慎使用。例如：

p {
  color: red!important;
}

即使在其他地方存在针对 p 元素 color 属性的不同声明，由于 !important 的存在，color 属性值将被强制设置为红色。

2. 比较特殊性

1.计算选择器的特殊性值：选择器的特殊性是基于其组成部分来计算的。例如，ID 选择器具有较高的特殊性，类选择器次之，元素选择器相对较低。一个由多个选择器组合而成的复合选择器，其特殊性是各个选择器特殊性值的累加。具体计算方式如下：

• 内联样式（通过 style 属性直接在 HTML 元素上设置的样式）特殊性值为 1000。
• ID 选择器的特殊性值为 0100。例如 #myId
• 类选择器、属性选择器或伪类选择器的特殊性值为 0010。例如 .myClass 或 [type="text"]、:hover 等。
• 元素选择器和伪类选择器的特殊性值为0001。 例如 p、a、:hover 等。

2.比较特殊性确定属性值：在存在冲突声明时，特殊性值越高的声明将被优先采用。例如

#container p {
  color: blue;
}

p {
  color: green;
}

在上述代码中，#container p 选择器的特殊性高于 p 元素选择器，所以在 #container 元素内部的 p 元素，其 color 属性值将为蓝色。

3. 比较源次性

如果两个声明具有相同的重要性和特殊性，那么后出现的声明将覆盖先出现的声明。这就意味着在样式表中，越靠后的声明在源次性上具有更高的优先级。例如：

p {
  color: green;
  color: blue;
}

最终 p 元素的 color 属性值将为橙色，因为第二个 color 声明在源次上更靠后。

三、继承

对于那些经过前面步骤仍然没有确定值的属性，如果该属性是可继承的，那么子元素将继承父元素的相应属性值。例如，font-family 属性通常是可继承的，如果在父元素中设置了 font-family: Arial, sans-serif;，那么子元素在没有特别声明 font-family 属性时，将自动继承该字体设置。

四、使用默认值

对于那些既没有在样式表中被声明，又不能从父元素继承的属性，将使用浏览器提供的默认值。例如，display 属性在未设置时，对于大多数元素，浏览器会应用其默认的 display 值，如 div 元素默认的 display 值为 block。