Можно ли использовать символ пробела в именах классов CSS?

Question

У меня есть случай с сгенерированными компьютером именами классов, где может быть, что имя класса может содержать символ пробела (у меня нет прямого контроля над идентификаторами, которые превращаются в имена классов).Я выяснил, как избежать всех символов в CSS (см. Отличные ответы в Какие символы допустимы в именах / селекторах классов CSS? и http://mathiasbynens.be/notes/css-escapes).

Но мне не удалосьполучить пробел, экранированный в имени класса CSS в коде HTML.

Теперь я использовал решение, которое позволяет избежать пробелов, но мне все же любопытно, если / как можно было бы избежать пробела вЗначение атрибута класса.

Например: мое имя класса "a b".

Я могу написать селектор CSS в CSS как .a\20 b { }.

Но используя  в атрибуте, таком как <div class="a&#x20;b"/>, будет интерпретироваться так же, как и <div class="a b"/>, и это определяет два класса.

Answer 1

Невозможно избежать пробела в значении атрибута класса и, следовательно, всегда будет интерпретироваться как два разных класса.

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

Он распознает пробел как новый class name, поэтому используйте . вместо space в css.

.a.b{
color:red
}

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