是否可以在 CSS class 名称中使用 space 字符?

Is it possible to use the space character in CSS class names?

我遇到过计算机生成 class 名称的情况,其中 class 名称可能包含 space 字符(我无法直接控制变成 class 名称的 ID)。 我想出了如何转义 CSS 中的所有字符(参见 Which characters are valid in CSS class names/selectors? and http://mathiasbynens.be/notes/css-escapes 中的优秀答案)。

但我没能在 HTML 代码的 CSS class 名称中转义 space 字符。

我现在使用了一个避免 spaces 的解决方案,但我还是很好奇是否/如何转义 class 属性值中的 space 字符.

例如:我的 class 名字是 "a b"

我可以在 CSS 中编写一个 CSS 选择器作为 .a b { }

但是在 <div class="a&#x20;b"/> 等属性中使用 &#x20; 将被解释为与 <div class="a b"/> 相同,这定义了两个 class。

它将 space 识别为新的 class name,因此在 css 中使用 . 而不是 space .

.a.b{
color:red
}
<div class="a b">try me</div>

无法转义 class 属性值中的 space 字符,因此将始终被解释为两个不同的 classes。

https://html.spec.whatwg.org/multipage/dom.html#classes

When specified on HTML elements, the class attribute must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.

当然可以转义 space 字符,例如&#x20; — HTML 属性值可以包含每个 https://html.spec.whatwg.org/multipage/syntax.html#syntax-attribute-value:

的字符引用

Attribute values are a mixture of text and character references, except with the additional restriction that the text cannot contain an ambiguous ampersand.

然而,space 是否被 HTML 转义并不重要,因为上面的语句适用。 HTML 编码的 space 字符仍然解码为 space 字符,例如class="a&#x20;b" 仍然会导致“一组 space 分隔的标记”。参见例如https://html.spec.whatwg.org/multipage/parsing.html#attribute-value-(double-quoted)-state 双引号属性值的解析方式。