关于额外空格的 CSS 语法

Question

CSS 怎么可能将空格识别为错误？

这将起作用，例如: 高度:50px;

但这行不通？: 高度:50 px;

有人能告诉我为什么会这样吗？在我的 CSS 中很难找到这个错误。

Answer 1

W3C specification指出，对于 CSS Level 3，所有非零值 都必须附有一个单位标识符，在本例中为px。在值后添加一个空格与根本不添加单位标识符 本质上是一样的。 CSS 规范将空格视为浏览器应停止解释该属性并移至新行或属性列表的指令。

body {
   font-size: 50 px;
}

不行，因为 CSS 被解释为:

元素是什么？ Body. 如果可能，根据规范进行解释。有空间；移动到下一行或属性。属性(property)是什么？ Font-size. 此属性需要一个值。 font-size 属性的值是多少？ 50. 如果可能，根据规范进行解释。移至下一行或属性。下一行是 px;。等等等等

因此浏览器将以这种方式解释您的 CSS。该规范允许在属性和单元之间有一个空格或没有空格(size:50px; vs size: 50px;)，所以浏览器对于这两种情况都有一个用例。如果 unit 和 unit identifier (size:50 px;) 之间有空格，则没有用例，因为规范不允许。浏览器不知道该做什么并继续前进；样式未应用。