CSS——属性值计算

news2024/10/6 5:09:00

CSS——属性值计算

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

基本概念

层叠样式表：Cascade Style Sheet，是的，这就是 CSS 的中英文全称。
层叠：在 CSS 样式中，会出现一些样式的冲突，层叠就是用来解决这些冲突的。
声明：键值对形式，用来指定样式，如：color: red。
用户代理样式表：浏览器内置的默认样式表，确保在没有任何外部或内部CSS的情况下，网页内容能够以一种合理的方式呈现给用户。
作者样式表：网页作者定义的CSS内容（不一定是一个文件，可以是外部CSS文件，可以是内部<style>标签内的样式、也可以是行内样式）
用户样式表：网页用户自定义的样式表，一般与我们开发者无关，后面不详细考虑。

属性值计算规则（顺序）

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

确定声明值
层叠冲突
使用继承
使用默认值

接下来我们逐一讲述。

确定声明值

我们首先创建以下代码：

<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）