CSS Rule、Declaration、Property、Value 到底有什么区别？

写了好几年 CSS，你可能从来没认真想过这几个词的区别——反正代码能跑起来就行。

但如果你看过任何一份 CSS 规范文档，或者面试的时候被问到”什么是 CSS 声明”,大概率会愣一下：这几个词平时说的时候好像都在指”一段CSS代码”，但规范里它们其实各有各的地盘，谁也不能替代谁。

今天就用大白话把这几个概念捋清楚，看完之后你会发现，这其实一点都不绕。

先上一个完整例子

p {
  color: red;
  font-size: 14px;
}

这一整段代码，在 CSS 规范里叫做一条 规则（Rule）。规则不是随便一段代码，它有固定的两部分组成：

1. 前面的 p，叫 选择器（Selector）——负责说”我要作用在谁身上”；
2. 后面花括号 { } 包起来的部分，叫 声明块（Declaration Block）——负责说”具体要做什么改动”。

这两部分缺一不可。只有选择器没有声明块，或者只有声明块没有选择器，都不构成一条完整的规则。

Declaration（声明）：声明块里的最小单位

声明块里面可以写很多条修改指令，每一条指令就是一条 声明（Declaration）。上面例子里，声明块里其实包含了两条声明：

• color: red;
• font-size: 14px;

每条声明都以分号结尾（最后一条可以省略，但建议别省，方便以后加新的）。声明是构成声明块的基本单位，就像一块块砖头砌成一堵墙——声明块就是墙，声明就是砖。

Property 和 Value：声明内部的两半

再往细了拆，一条声明其实还能一分为二。以 color: red; 为例：

• 冒号前面的 color，叫 属性（Property）——它规定了”你要改的是元素的哪个方面”，比如颜色、字号、边距……
• 冒号后面的 red，叫 值（Value）——它规定了”这个方面具体改成什么”。

属性就像一张表格的”列名”，值就是这一列具体填的”数据”。color 这一列，可以填 red，也可以填 #ff0000，还可以填 rgb(255, 0, 0)——列名不变，但值可以有很多种写法。

用一句话的语法结构来记

如果觉得这几个词还是容易混，不妨类比成一句完整的句子：

“把 p 标签（选择器） 变成：颜色是红色，字号是14px（声明块，包含两条声明：颜色=红色、字号=14px）”

再往下拆一条声明，就相当于一个”属性=值”的短语：颜色（属性）是红色（值）。

层级关系从大到小依次是：

Rule（规则） → 包含一个选择器 + 一个声明块 　　Declaration Block（声明块） → 包含若干条声明 　　　　Declaration（声明） → 由一个属性和一个值组成 　　　　　　Property（属性） + Value（值）

为什么要分得这么细？

平时写代码确实不需要一直念叨这些术语，但搞清楚这套概念在几种场景下特别有用：

• 看规范文档或 MDN 的时候不会懵。规范里经常说”某个属性接受哪些值”，或者”某条声明是否合法”，如果分不清 Declaration 和 Property，读起来就会很吃力。
• 用 JavaScript 操作样式的时候更清楚该调哪个 API。比如 CSSStyleDeclaration 这个接口，操作的就是”声明”这个层级，它下面有 getPropertyValue()、setProperty() 这些方法，一看名字就知道对应的是 Property 和 Value。
• 排查 CSS 报错更快定位问题。比如浏览器提示某条声明无效，你就知道该去检查的是”属性名写错了”还是”值的格式不对”，而不是去怀疑整个选择器。

小结

一句话总结这几个词的关系：

规则（Rule）= 选择器（Selector）+ 声明块（Declaration Block） 声明块（Declaration Block）= 一条或多条声明（Declaration） 声明（Declaration）= 属性（Property）+ 值（Value）

下次再看到这几个词，不用再靠”感觉”去理解，脑子里过一遍这个层级关系，基本就不会搞混了。