CSS——属性值计算

CSS------属性值计算

今天来详细讲解一下 CSS的属性值计算过程 ，这是 CSS 的核心之一（另一个是视觉可视化模型，个人理解，这个相对复杂，以后再讲）。

CSS 的属性值计算主要分为以下 4 个步骤：

接下来我们逐一讲述。

我们首先创建以下代码：

html 复制代码

<head>
  <style>
    p {
      color: blueviolet;
    }
  </style>
</head>

<body>
  <div class="text">
    <p>你好，我是懒羊羊大王</p>
  </div>
</body>

这里我们声明了<p>标签文本的为紫罗兰色，目前来看没有冲突，显示出来的也是紫罗兰色，没有任何问题。

当有样式冲突时，那么浏览器该按照哪个声明渲染呢？前面说到，层叠就是解决冲突的，层叠具体规则以及顺序如下：

样式表按照源可以分为三类：作者样式表、用户样式表（一般不考虑）、浏览器用户代理样式表 。它们的优先级依次降低。

这里不仅仅有使用选择器设置于行内设置的差异，还有一个很特殊但几乎不会使用的情况------! important，优先级为：设置! important的样式 > 行内样式> 选择器样式。

当我们将鼠标放置在标签选择器上时，会看到浏览器特定性：(x, y, z) ，这里我们就可以将它看作一个三位正整数，比较大小时，我们先比较 x ，再比较 y ，最后比较 z 。

问：那么其大小是如何确定的呢？

答：常见的选择器的特定性如下：

id选择器：(1, 0, 0)、

类选择器：(0, 1, 0)、

标签选择器：(0, 0, 1)......

多个选择器的特定性可以叠加。

（伪类选择器（如:hover）和属性选择器（如 $type="input"$ ）与一个类选择器的优先级相同。通用选择器（*）和组合器（>、+、~）对优先级没有影响。详情见 MDN Specificity）

在前面比较结束之后，仍然未分出优先级的话，那么就来比较在源码中出现的顺序了，同一个样式表中顺序靠后的声明 ，或者是位于html页面较晚引入的样式表中，那么这个声明胜出。

总而言之，层叠的规则如下图所示（记得考虑 ! important）

那么如果没有声明的属性呢？此时就使用默认值么？
No、No、No，此时还有第三个步骤，那就是使用继承而来的值。如果属性可以继承的话，那么就会继承其父元素的属性值。大多数能继承的属性是一些文字相关的属性，具体的请参考MDN官方。

进行了以上步骤之后，如果属性值都还不能确定下来，那么就会使用默认值。

创作不易，谢谢支持；如有错误，恳请指出，希望与大家共同进步！