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

为什么任何浏览器都不能应用此颜色rgb规则？为什么“rgb（224，226，213）”属性值无效？

HTML

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

CSS

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

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

来源

2012-12-14 Pigueiras

rgb后面有空格 – Esailija

虽然这是一个错字问题，但我认为这不太可能帮助未来的读者。这是一个非常常见的问题，我的回答也暗示了这一点。 – BoltClock

你有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（”后面是逗号分隔的三个数值（无论是3的整数值或三个列表百分比值），然后是'）'。 [...]在数字值周围允许有空白字符。

，也指Appendix G的语法，正是下列标记化，这清楚地表明，不希望空白的标识符和左括号之间：

{ident}"("  {return FUNCTION;}

来源

2012-12-14 10:51:43 BoltClock

这对我来说是一个惊喜，但CSS 2.1语法确实以这种方式定义了函数符号，甚至“rgb（...）”的散文描述也清楚地表明了这一点（并且还明确指出空间可以在这些数字意味着在符号中不允许有空格）。 –

解决此类错误的最简单方法是验证它。你可以在[W3C验证器]中验证你的css（http://jigsaw.w3.org/css-validator/#validate_by_input）。 –

尽管拼图验证程序可以为您发现错误，但在向您展示如何修复它们时，这是非常不可靠的。例如，它实际上并没有告诉你，空间的存在是造成问题的原因（因为它没有将空间看作是一个开始的问题）。对于习惯于允许空间的语言编程的人来说，它不会立即显而易见。如果提问者在发布他们的问题之前确实通过Jigsaw运行了他们的CSS（这并不是说我相信他们这么做了，但即使他们这么做了，我也不会感到惊讶，如果他们最终发布了）。 – BoltClock

你需要rgb后删除空格rgb(224, 226, 213)

来源

2012-12-14 10:53:33

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

回答

相关问题