是否可以在CSS类名中使用空格字符？

Question

我有一个计算机生成的类名称，其中类名可能包含空格字符（我无法直接控制转换为类名的ID）。 我想出了如何转义CSS中的所有字符（请参阅Which characters are valid in CSS class names/selectors?和http://mathiasbynens.be/notes/css-escapes中的优秀答案）。

但我没有设法在HTML代码中的CSS类名中获取空格字符。

我现在使用了避免空格的解决方案，但我很好奇是否/如何可以转义类属性值中的空格字符。

例如：我的班级名称是"a b"。

我可以在CSS中编写一个CSS选择器.a\20 b { }。

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

Answer 1

它会将空格识别为新class name，因此请在css中使用. 而不是 space。

.a.b{
color:red
}

<div class="a b">try me</div>

Answer 2

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

  

在HTML元素上指定时，class属性的值必须是一组空格分隔的标记，表示该元素所属的各种类。

当然可以逃避空间角色，例如  - HTML属性值可以包含每个https://html.spec.whatwg.org/multipage/syntax.html#syntax-attribute-value的字符引用：

  

属性值是文本和字符引用的混合，除了文本不能包含模糊符号的附加限制。

但是，对于要应用上述语句，空格是否为HTML转义并不重要。 HTML编码的空格字符仍然解码为空格字符，因此例如class="a b"仍然会产生“一组以空格分隔的标记”。参见例如https://html.spec.whatwg.org/multipage/parsing.html#attribute-value-(double-quoted)-state了解如何解析双引号属性值。

Answer 3

无法转义类属性值中的空格字符，因此将始终将其解释为两个不同的类。