为什么"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(),以及功能的伪类,如:nth-child(),:lang()和:not().

参见CSS2.1的4.3.6节,其中规定:

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

并且还参考附录G的语法,正好是下面的标记化,它清楚地表明标识符和左括号之间不需要空格:

{ident}"("      {return FUNCTION;}