CSS样式属性值的计算过程

浏览器CSS样式是 一个元素一个元素依次渲染，顺序按照页面文档的树形结构进行。

渲染每个元素的前提条件是：该元素的所有CSS属性必须有值。

一个元素从所有属性都没有值，到所有属性都有值，这个计算过程，叫作属性值的计算过程。

属性值的计算过程简介：
1 确定声明值 样式表中没有冲突的声明，作为CSS属性；
2 层叠冲突 对样式表中有冲突的声明，使用层叠规则，确定CSS属性；

• 比较重要性 看权重
• 比较特殊性 多选择器加权
• 比较源次序 同权重看前后，后面的覆盖前面的（包括选择器后大括号同一个大括号块里的样式，也是后面的覆盖前面的。）

3 使用继承 对仍没有值的属性，若可以继承，则继承父元素的属性值；
4 使用默认样式 仍然没有值的属性，使用默认值。

实践一下

 <div>
        <a href="">举个例子</a>
        <p>P元素</p>
    </div>

<style>
  div{
      color: red;
  }
  </style>

浏览器的默认样式在层叠冲突时运算 高于自然的上下文继承

特殊的两个CSS取值

• inherit 强制继承，将父元素的值取出应用到该元素； 权重取决于前面的选择器，属性值只是指向了父级元素的值；
• initial 初始值，将该元素设置为默认值； 权重取决于它的选择器，属性值指向默认值，这个默认值不要和浏览器的默认值混淆，它是元素固有的那个状态，像透明或其他。

什么是权重（这是上面大的渲染规则里的一个小分支）

权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。
当很多的样式被应用到某一个元素上时，权重是一个决定哪种样式生效，或者是优先级的过程。
每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中 。
如果两个选择器同时作用到一个元素上，权重高者生效。

权重记忆口诀：从0开始，一个行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+10，一个元素选择器，或者伪元素+1，通配符+0。

注意：

• 这里的进制是256，不要想着叠加10个让权重升一级；
• !important的作用是提升样式优先级，如果加了这句的样式的优先级是最高的,infinity