css – 为什么“rgb(224,226,213)”属性值无效？

为什么浏览器不能应用这个颜色的rgb规则？

HTML

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

CSS

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

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

解决方法

你有一个空格rgb和(,不允许：

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

不,我很认真,不是.

与许多编程语言不同,CSS明确禁止在函数名和开始括号之间具有空格.这不仅适用于rgb()和rgba(),还适用于其他功能值,如url()和attr(),以及功能伪类,如：nth-​​child(),lang()和：不().

参见section 4.3.6 of CSS2.1,其中指出：

The format of an RGB value in the functional notation is ‘rgb(‘ followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ‘)’. […] White space characters are allowed around the numerical values.

并且还参考Appendix G的语法,准确地说是以下令牌化,这清楚地表明标识符和开始括号之间不预期空格：

{ident}"("      {return FUNCTION;}