为什么“rgb（224,226,213）”属性值无效？

Question

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

HTML

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

CSS

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

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

Answer 1

rgb和(之间有空格，不允许这样做：

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

不，我很认真，不是。

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

请参阅section 4.3.6 of CSS2.1，其中说明：

  

功能表示法中RGB值的格式为'rgb（'后跟逗号分隔的三个数值列表（三个整数值或三个百分比值），后跟'）'。 [...] 数值周围允许使用空格字符。

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

:not()

Answer 2

您需要在rgb rgb(224, 226, 213)

之后删除空格