前言

写久了web前端的样式，基本上都知晓如何编写css，已经对应如何应用到对应的标签上，那么，我们自己有没有想过，为毛这里编写的css久可以直接在界面上展示出我们所编写的效果，浏览器它做了什么事情，
使🉐️我们可以编写出排版整齐，配色优美的界面的呢？
这里通过对这个浏览器中关于css的原理简单讲解，来更加深入地理解我们所编写地css样式代码，是如何被浏览器所识别并使用到每个节点标签中地！！！

浏览器中css的工作原理

浏览器中的css的工作原理，是将原本写在一起的css样式规则，通过浏览器自身代理，拆分为一个个分散的独立的css属性，根据每个属性的特指度来进行层叠，然后最终计算出其合并后的css规则，
也就是getComputedStyle对象，该对象是不可编辑的，最终展示在界面中

具体流程如下所示：
css中的拆分逻辑

基础概念

要了解关于css中的应用规则，首先需要掌握一下几个基本的概念

特指度(specificity)

选择符的特指度有选择符本身的组成部分决定，一个特指度值由4部分组成：0，0，0，0

对应特指度中的每一位的对应关系图如下：
css中的特指度

有以下一个例子可供学习关于特指度：

1
2
3
html > body table > tr[id="totals"] td ul > li{
    color: #2aa198;
}

上述例子中的特指度为：0，0，1，7

🤔 为毛浏览器代理要打散原本已经组合而成的规则为单个单独的规则呢？
👉 如果有多个同个属性规则同时作用于同一个节点，那么特指度高的则胜出，作为最终的结果展示。

✨ 通用选择符的特指度：*，其特指度的值为：0,0,0,0，这里需要注意，它与没有特指度是完全不同的，它是优先级角度的特指度！！！

层叠(cascade)

CSS采用层叠机制将样式组合在一起，也就是结合继承和特指度的一些规则，一般有以下的一个流程：

  1. 找到匹配的特定元素的规则；
  2. 优先以!important为主；
  3. 按照来源(创作人员、读者、用户代理)排序；
  4. 按照特指度值大小优先排序；
  5. 对于同一个特指度值的则按照先后顺序，后定义的覆盖到前面定义的。
继承(inherit)

继承指某些样式属性不但应用到所对应的节点元素上，还作用于其后代节点上

✨ 与通用选择符的冲突：一般的如果我们在不设置节点的默认属性时，该节点默认从组件节点中继承一些属性来作为自己的样式展示，但是一旦使用的通用选择符的时候，原本可以通过继承而来的属性，
在这个时候会被通用选择符所替代。

👉 一般地，在声明的权重上，需要考虑以下从高到底的权重顺序：

  1. 读者提供的样式中以!important标记的声明；
  2. 创作人员编写的样式中以!important标记的声明；
  3. 创作人员编写的常规声明；
  4. 读者提供的常规声明；
  5. 用户代理的默认声明。
重要声明(!important)

有时，某个声明可能非常重要，需要设置为超过所有的声明，因此，需要在对应的属性值后添加!important

存在疑问🤔️

🤔读者提供的样式、创作人员提供的样式、用户代理提供的样式，三者分别代表的什么？

  1. 读者提供的样式：用户通过浏览器提供的接口来设置的称为读者样式；
  2. 创作人员提供的样式：开发者编写的样式；
  3. 用户代理提供的样式：浏览器自身默认提供的默认样式