css - 为什么 css 声明中不允许使用不间断空格？

Question

我正在修复一些不起作用的 css 样式，发现 css 声明中不允许使用不间断空格 (\u00A0)，并且它会中断解析。它在所有浏览器中都会可靠地中断，因此似乎这种行为是预期的。有人知道为什么会这样吗？ Fiddle here文本应该是红色的，但事实并非如此，删除不间断空格可以修复它。

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".text\u00A0{ color: red}";
document.head.appendChild(css);

<span class="text">red?</span>

Answer 1

在 CSS 中，U+00A0 NO-BREAK SPACE 不是空格。只有 ASCII 空格、制表符、换行符和换页符才算作空白。来自 spec :

Only the characters "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D), and "form feed" (U+000C) can occur in white space. Other space-like characters, such as "em-space" (U+2003) and "ideographic space" (U+3000), are never part of white space.

此处未提及 U+00A0，但由于它不是允许的字符之一，因此暗示不允许使用。

由于它不被视为空格，因此必须将其视为选择器的一部分。来自 section 4.1.3 of the same document (其中确实提到了代码点U+00A0，尽管纯粹是巧合):

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_)

选择器本质上成为查找具有 class="text " 的元素的选择器，其中不间断空格是类名称的一部分:

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".text\u00A0{ color: red}";
document.head.appendChild(css);

<span class="text">red?</span>
<span class="text&nbsp;">red!</span>