CSS属性计算--流水不争先，争的是滔滔不绝

读完本文你将了解到什么

• 什么是CSS属性计算
• 属性获取值的步骤（确定声明值、层叠、继承、使用默认值）
• 打破前两个步骤的关键字

CSS属性计算具体指的是什么呢？

通俗一点来讲：CSS属性计算的过程指的就是某个元素的所有CSS属性从没有值到有值的过程。

属性获取值的四个步骤

1、确定声明值

首先先得明确两个概念

• 作者样式表：也就是由开发者自己编写的样式表。
• 浏览器默认样式表（User Agent Stylesheet）：由Web浏览器供应商预先定义的一组CSS规则，用于在没有任何外部样式或内联样式指定的情况下，为HTML元素提供基本的呈现样式。这些样式确保即使页面没有附加任何自定义样式，页面的内容也能具有某种程度的基本可读性和结构展示。

在确定声明值阶段浏览器会从两者中找到没有冲突的样式，直接作为计算后的样式。

并且，还会将一些预设值转换为绝对值，例如：

• red -> rgb(255,0,0)
• bold -> 700

经过这一阶段后，有一部分的属性就已经有了值。

但是，不同浏览器对<h1>到<h6>标题元素、列表、链接、表格、按钮以及其他各种元素的字体、颜色、内边距、外边距等属性有着各自不同的默认处理方式，如果你在作者样式表没有对样式进行统一处理的话，可能会产生很多的浏览器兼容问题。

毕竟谁也不想自己的网页在不同的浏览器上形态各异。

为了消除这些差异，开发者经常会在项目开始阶段引入CSS重置或Normalize.css这样的工具，它们旨在统一不同浏览器下的样式表现，将所有元素的样式初始化至一个已知且一致的状态，以便后续添加自定义样式时能达到预期效果。例如Eric Meyer的CSS Reset和Nicolas Gallagher的Normalize.css都是广为人知的解决此问题的方法。

2、层叠

CSS中文译为层叠样式表，层叠当然是CSS中极为重要的一环。

在确定声明值之后，只有作者样式表与浏览器默认样式表中没有冲突的属性才会被赋予各自的声明值

比如这里红色箭头所指的用户代理样式表（User Agent Stylesheet），实际上指的就是浏览器默认样式表。

而对于那些有冲突的样式，则会对其进行分为三个步骤的层叠。

（1）比较重要性

重要性从高到低：

1. 带有 !important 的作者样式
2. 带有 !important 的默认样式
3. 作者样式
4. 默认样式

这部分应该很好理解，属性会接受重要性最高的值，即重要性高的值会覆盖掉重要性低的值

（2）比较特殊性

这里涉及到了CSS层叠中很重要的一个概念：选择优先级、权重或者特殊性，不管你称它为什么，它们指的其实都是一个东西（下文中统一称为特殊性）

那么怎样计算特殊性呢？

1. 对选择器分别计数
2. 从高位开始比较，决出最高等级的

选择器计数规则（高位到低位）：

• 是否为style内联样式(是：1 否：0)
• id(id选择器的数量)
• 属性(属性、类、伪类选择器的数量)
• 元素(元素、伪元素选择器1的数量)

举例：

• .red -> 0 0 1 0
• h1 -> 0 0 0 1
• div h1.red 0 0 1 2

在使用 vscode 开发时，IDE会自动帮我们标出选择器的特殊性（最高位行内不显示）：

（3）比较原次序

经过上一个步骤应该已经有很大一部分属性拥有了值，在这一步规则同样很简单：源码中靠后的覆盖靠前的

3、继承

对于仍然没有值的属性， 若可以继承，则使用继承

判断是否可以继承可以查看MDN

和文字相关的一般可以继承

4、使用默认值

是的，元素的所有属性都是有默认值的，例如：

background-color属性默认值为transparent

当然这些默认值可能被浏览器默认样式表，也就是用户代理样式表修改了，例如：

div之所以是块盒，并不是因为它理所应当，自然而然的就是，而是因为chrome浏览器的用户代理样式表将它的默认值修改了。

到这里，属性获取值的四个步骤就结束了，值得再次强调的是：当属性在某个步骤获得值时，它便不再参与下一个步骤

在确认声明值和层叠步骤可以改变属性值的关键字

• inherit 关键字使得元素获取其父元素的计算值
• initial 关键字使元素的值变为默认值
• unset 关键字使元素值的设置直接跳过前两步 可以继承的属性便会去继承 不能继承的就会使用默认值
• revert 关键字会将该属性设置回默认样式（前提是清除了默认样式）
• all 属性会将所有属性设置为其 初始、继承、还原或未设置状态

到这里就全结束喽！如果你觉得对你有帮助的话，拜托赏个赞再走哦！

-- IndulgeBack 25届前端菜鸟