为什么“rgb (224, 226, 213)”是一个无效的属性值？答案

【问题标题】：Why is "rgb (224, 226, 213)" an invalid property value?为什么“rgb (224, 226, 213)”是一个无效的属性值？
【发布时间】：2012-12-02 08:48:38
【问题描述】：

为什么任何浏览器都不能应用此颜色 rgb 规则？

HTML

<header>
    <h1>Header</h1>
</header>

CSS

header h1 {
    background-color: red;
    color: rgb (224, 226, 213);
}

Chrome Web Developer 工具告诉我这是一个无效的属性值，但我不明白为什么。您可以在JSFiddle 中看到结果。

【问题讨论】：

【解决方案1】：

rgb 和 ( 之间有空格，这是不允许的：

header h1 {
    background-color: red;
    color: rgb(224, 226, 213);
}

不，我是认真的，不是。

与许多编程语言不同，CSS 明确禁止在函数名和左括号之间使用空格。这不仅适用于rgb() 和rgba()，还适用于其他函数值，例如url() 和attr()，以及函数伪类，例如:nth-child()、:lang() 和:not()。

请参阅section 4.3.6 of CSS2.1，其中指出：

函数符号中 RGB 值的格式是“rgb(”，后跟以逗号分隔的三个数值（三个整数值或三个百分比值）列表，后跟“)”。 [...] 数值周围可以有空格字符。

并且还参考Appendix G的语法，正是以下标记化，清楚地表明标识符和左括号之间不需要空格：

{ident}"("      {return FUNCTION;}

【讨论】：

这让我很吃惊，但 CSS 2.1 语法确实以这种方式定义了函数符号，甚至rgb(...) 的散文描述也清楚地表明（它还明确表示空格是允许在数字周围，暗示否则符号中不允许有空格）。
解决此类错误的最简单方法是验证它。您可以在 W3C validator 中验证您的 css。
虽然 Jigsaw 验证器可以为您发现错误，但它向您展示如何修复它们是出了名的不可靠。例如，它实际上并没有告诉您空间的存在导致了问题（因为它并没有将空间视为作为开始的问题）。对于那些习惯于编程语言允许空间存在的人来说，这不会立即显而易见。如果提问者在发布他们的问题之前确实通过 Jigsaw 运行了他们的 CSS（不是说我相信他们这样做了，但即使他们这样做了，如果他们最终发布我也不会感到惊讶）。
当然，如果您已经知道那里不允许有空格，那么是的，只要让 Jigsaw 为您发现它们就足以让您在您的电脑上解决它们自己的。但如果你不这样做，那些解析错误将毫无用处，解决这些错误也绝非易事。

【解决方案2】：

rgbrgb(224, 226, 213)后面的空格需要去掉

【讨论】：