CSS类名称中可以使用空格字符吗? [英] Is it possible to use the space character in CSS class names?

问题描述

我有一个用计算机生成的类名的情况，该类名可能包含空格字符(我无法直接控制转换为类名的ID).我弄清楚了如何在CSS中转义所有字符(请参见 http://mathiasbynens.be/notes/css-escapes ).

I have a case with computer-generated class names where it could be that the class name might contain a space character (I don't have direct control over the IDs that are turned into class names). I figured out how to escape all characters in CSS (see the excellent answers in Which characters are valid in CSS class names/selectors? and http://mathiasbynens.be/notes/css-escapes).

但是我没有设法在HTML代码的CSS类名中转义空格字符.

But I didn't manage to get a space character escaped in a CSS class name in the HTML code.

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

I now used a solution that avoids spaces, but I'm curious nevertheless if / how it would be possible to escape the space character in the class attribute value.

例如:我的班级名称是"a b" .

E.g.: my class name is "a b".

我可以使用 .a \ 20 b {} 在CSS中编写CSS选择器.

I can write a CSS selector in CSS as .a\20 b { }.

但是在< div class ="a&#x20; b"/> 之类的属性中使用  会被解释为相同为< div class ="ab"/> ，这定义了两个类.

But using   in the attribute such as <div class="a&#x20;b"/> will be interpreted the same as <div class="a b"/> and this defines two classes.

推荐答案

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

在HTML元素上指定时， class 属性必须具有一个值，该值是表示元素所属的各个类的一组以空格分隔的标记./p>

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.

当然可以转义一个空格字符，例如  -HTML属性值可以包含每个 https://html.spec.whatwg.org/multipage/syntax.html#syntax-attribute-value :

Of course it’s possible to escape a space character, e.g.   — HTML attribute values can contain character references per 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.

但是，对于上面的语句而言，该空格是否已转义都无关紧要.HTML编码的空格字符仍会解码为空格字符，因此例如 class ="a  b" 仍然会产生一组用空格分隔的标记".参见例如 https://html.spec.whatwg.org/multipage/parsing.html#attribute-value-(双引号)-状态有关如何解析双引号属性值的信息.

However, it doesn’t matter whether the space is HTML-escaped or not for the above statement to apply. A HTML-encoded space character still decodes to a space character, and so e.g. class="a b" still results in "a set of space-separated tokens". See e.g. https://html.spec.whatwg.org/multipage/parsing.html#attribute-value-(double-quoted)-state for how double-quoted attribute values are parsed.

这篇关于CSS类名称中可以使用空格字符吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！