Question

我正在修复一些非工作的css样式，并发现在css声明中不允许使用非破坏空间（\ u00A0）并使其解析。它在所有浏览器中都可靠地中断，所以看起来这种行为是预期的。有人知道为什么会这样吗？ Fiddle here文字应该是红色但不是，删除非破坏空格会修复它。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

在CSS中，U + 00A0 NO-BREAK SPACE不是空格。只有ASCII空格，制表符，换行符和换页符计为空格。来自spec：

只有角色＆＃34;空间＆＃34; （U + 0020），＆＃34; tab＆＃34; （U + 0009），＆＃34;换行＆＃34; （U + 000A），＆＃34;回车＆＃34; （U + 000D），＆＃34;形成饲料＆＃34; （U + 000C）可以在白色空间中发生。其他类似空间的角色，例如＆＃34; em-space＆＃34; （U + 2003）和＆＃34;表意空间＆＃34; （U + 3000），绝不是白色空间的一部分。

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

由于它不被视为空格，因此必须将其视为选择器的一部分。来自section 4.1.3 of the same document（其中提及代码点U + 00A0，尽管仅仅是巧合）：

在CSS中，标识符（包括选择器中的元素名称，类和ID）只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高，加上连字符（ - ）和下划线（_）

选择器基本上变成了一个查找具有class="text "元素的选择器，其中不间断空格是类名的一部分：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

那是因为非破坏空间就像任何其他角色一样。发生看起来像一个空格，但它与“a”或“4”或“♥”没有区别。

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

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

正如您所看到的，通过在类名中添加一个不间断的空格，您的示例可以正常工作。

为什么css声明中不允许使用非破坏空间？

2 个答案: