Какие символы допустимы в именах/селекторах классов CSS?

к моему удивлению, большинство ответов здесь неверны. Оказывается, что:

любой символ, кроме NUL, разрешен в именах классов CSS в CSS. (если CSS содержит NUL (экранированный или нет), результат не определен. [CSS-символы])

Матиас Bynens' ссылки объяснение и демо показывает, как использовать эти имена. записано в коде CSS, имя класса может понадобиться побег, но это не меняет название класса. Например, излишне экранированное представление будет выглядеть иначе, чем другие представления этого имени, но оно по-прежнему относится к тому же имени класса.

большинство других языков (программирования) не имеют такой концепции экранирования имен переменных ("идентификаторов"), поэтому все представления переменной должны выглядеть одинаково. В CSS это не так.

обратите внимание, что в HTML нет способа включить пробельные символы (пробел, табуляция, перевод строки, перевод и возврат каретки) на имя класса атрибута, потому что они уже отделить классы друг от друга.

Итак, если вам нужно превратить случайную строку в имя класса CSS: позаботьтесь о NUL и space и escape (соответственно для CSS или HTML). Сделанный.

читать W3C spec. (это CSS 2.1, найти соответствующую версию для вашего предположения браузеров)

изменить: соответствующий пункт следующее:

в CSS, идентификаторы (в том числе имена элементов, классы и ID в селекторах) могут содержать только символы [a-z0-9] и ISO 10646 символы U + 00A1 и выше, плюс дефис ( - ) и подчеркивание (_); они не могут начинаться с цифры, или дефис, за которым следует цифра. Идентификаторы также могут содержать экранированные символы и любой символ ISO 10646 в виде числового кода (см. Следующий пункт). Для например, идентификатор " B & W?" могут быть написано как " B\ & W\? или "B\26 W\3F".

edit 2: как указывает @mipadi в ответе триптиха, есть это будьте осторожны, также на той же веб-странице:

в CSS, идентификаторы могут начинаться с '-' (тире) или '_' (подчеркивание). Ключевое слово и имена свойств, начинающиеся с '-' или'_' зарезервированы для расширения для конкретных поставщиков. Такие расширения поставщика должны один из следующих форматов:

'-' + vendor identifier + '-' + meaningful name 
'_' + vendor identifier + '-' + meaningful name

пример(ы):

например, если добавлена организация XYZ свойство для описания цвета граница на восточной стороне дисплей, они могли бы назвать это - xyz-граница-Восток-цвет.

другие известные примеры:

 -moz-box-sizing
 -moz-border-radius
 -wap-accesskey

начальный тире или подчеркивание никогда не будет использован в один свойство или ключевое слово любым текущим или будущий уровень CSS. Таким образом типичный CSS реализации могут не признавать такие свойства и может игнорировать их согласно правилам обращения разбор ошибок. Однако, потому что начальный тире или подчеркивание является частью грамматика, CSS 2.1 реализации всегда должен быть в состоянии использовать CSS-соответствующий парсер, будь то или нет они поддерживают любого конкретного поставщика увеличение.

авторы должны избегать конкретных поставщиков расширения

Я ответил на ваш вопрос подробно здесь:http://mathiasbynens.be/notes/css-escapes

в статье также объясняется, как избежать любого символа в CSS (и JavaScript), и я сделал удобный инструмент и для этого тоже. С этой страницы:

Если вы должны были дать элементу значение идентификатора ~!@$%^&*()_+-=,./';:"?><[]{}|`# селектор будет выглядеть так:

CSS:

<style>
  #\~\!\@$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\{\}\|\`\#
  {
    background: hotpink;
  }
</style>

JavaScript:

<script>
  // document.getElementById or similar
  document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\{}|`#');
  // document.querySelector or similar
  $('#\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#');
</script>

полное регулярное выражение:

-?(?:[_a-z]|[0-7]|\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[0-7]|\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\[^\r\n\f0-9a-f])*

Итак, все ваши перечисленные символы, кроме"-" и "_ " не допускаются при непосредственном использовании. Но вы можете кодировать их с помощью обратной косой черты foo\~bar или используя обозначение Юникода fooE bar.

для тех, кто ищет обходной путь, вы можете использовать селектор атрибутов, например, если ваш класс начинается с числа. Изменение:

.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */

для этого:

[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */

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

источники:

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
2. есть решение сделать CSS классы, имена которых начинаются с цифры действительны?

для HTML5/CSS3 классы и идентификаторы могут начинаться с чисел.

Я понимаю, что подчеркивание является технически допустимым. Проверьте:

https://developer.mozilla.org/en/underscores_in_class_and_id_names

"...ошибки в спецификации, опубликованной в начале 2001 года, впервые были признаны законными."

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