css属性值计算过程

前言

想要了解 css 生成实际的数据样式经历了那些步骤，才能了解到 css 的最终样式怎么样的，也能规避很多问题，甚至减少一些工作量和代码量，这就是涉及到 css 属性值计算过程了

我们设置的 css 属性，并不是说我们设置了什么属性，就一定会生效成什么属性，具体生效的属性，要看我们属性值计算的最终结果

计算过程一共有 4 步，声明、冲突、继承、默认，如下所示

确定声明值 ，这一步会把样式表（包括：作者样式表、浏览器默认样式表）中没有冲突的声明作为 CSS 属性值。
- 这一步后，但凡声明过且没有声明冲突的 CSS 属性都有了具体值，不会再受后面步骤影响。
层叠冲突 ，对样式表有冲突的声明使用层叠规则，确定其 css 属性值(参考后续)
- 这一步后，有声明冲突的 CSS 属性也有了具体值，至此，样式表上书写过的 CSS 属性已确定完成。
继承，经过前面两步，对仍然没有值的属性，若可以继承，则继承父元素的值。
- 这一步针对的是一个元素所有的，没有在样式表中声明的，且有可继承性的 CSS 属性。
- 因为这一步在层叠之后，所以层叠才能掩盖继承。
仍然没有值的属性，使用默认值。

当属性重复发生冲突，时那么就需要根据 作者样式表、浏览器默认样式表 来解决冲突了，作者样式表就是我们程序员写的样式了

他们的顺序如下所示

作者样式优先级

比较作者样式表的普通样式，也就几比较样式表的选择器的优先顺序了，这个很多文章里面都有

样式冲突时，我们比较选择器优先级的时候，一般都会带上 !important、style，毕竟知识逐渐扩展的，因此实际上比较的就是作者样式表的优先级 了

!importment > style > id选择器 > class选择器 | 属性 > 标签选择器 > 通配符选择器*

这些选择器默认是有权重的，会根据实际权重来决定先后顺序，同样的权重，后添加的覆盖先添加的

书写顺序（优先级一致时）

当作者样式优先级一致时，则会符合程序新值代替旧值思想，也就是同等优先级书写顺序决定最终样式

浏览器默认样式表

你在等待什么🤔，浏览器默认样式表优先级最低，有冲突的时候，说明有作者样式，轮不到它的🤣

当一些样式没有填写时，会继承祖先们的一些属性

css 样式继承主要是针对文本类的属性，文本类的属性，可以继承给后代文本，例如：color、font-family、font-size、font-style、font-weight、text-align、line-height等