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

Вы можете проверить прямо на Грамматика CSS.

По сути¹, имя должно начинаться с подчеркивания (_), дефиса (-) или буквы (a – z), за которыми следует любое количество дефисов, подчеркиваний, букв или цифр. Здесь есть одна загвоздка: если первый символ - дефис, второй символ ² должен быть буквой или знаком подчеркивания, а имя должно состоять не менее чем из 2 символов.

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

Короче говоря, предыдущее правило преобразуется в следующее, извлеченное из Спецификация W3C.:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B&W?" or "B\26 W\3F".

Идентификаторы, начинающиеся с дефиса или подчеркивания, обычно зарезервированы для расширений браузера, как в -moz-opacity.

¹ Все немного усложняется включением экранированных символов Юникода (которые на самом деле никто не использует).

² Обратите внимание, что в соответствии с грамматикой, которую я связал, правило, начинающееся с ДВУХ дефисов, например --indent1, недействителен. Однако я почти уверен, что видел это на практике.

Прочтите Спецификация W3C. (это CSS 2.1, найдите подходящую версию для вашего предположения о браузерах)

изменить: соответствующий абзац следует:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

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

In CSS, identifiers may begin with '-' (dash) or '_' (underscore). Keywords and property names beginning with '-' or '_' are reserved for vendor-specific extensions. Such vendor-specific extensions should have one of the following formats:

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

Example(s):

For example, if XYZ organization added a property to describe the color of the border on the East side of the display, they might call it -xyz-border-east-color.

Other known examples:

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

An initial dash or underscore is guaranteed never to be used in a property or keyword by any current or future level of CSS. Thus typical CSS implementations may not recognize such properties and may ignore them according to the rules for handling parsing errors. However, because the initial dash or underscore is part of the grammar, CSS 2.1 implementers should always be able to use a CSS-conforming parser, whether or not they support any vendor-specific extensions.

Authors should avoid vendor-specific extensions

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

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

Таким образом, все перечисленные вами символы, кроме «-» и «_», не допускаются при прямом использовании. Но вы можете закодировать их, используя обратную косую черту foo\~bar или используя нотацию Unicode foo\7E bar.

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

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

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

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

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

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

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

If you were to give an element an ID value of ~!@$%^&*()_+-=,./';:"?><[]{}|`#, the selector would look like this:

CSS:

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

JavaScript:

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

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

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

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

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

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

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

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

.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 с именами, начинающимися с цифр, действительными?

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

[^a-z0-9A-Z_-]

Это обратное совпадение, при котором выбираются все, кроме букв, цифр, тире или подчеркивания, для легкого удаления.

^-*[0-9]+

Это соответствует 0 или 1 дефису, за которым следует 1 или несколько чисел в начале строки, также для легкого удаления.

Как я использую это в PHP:

//Make alphanumeric with dashes and underscores (removes all other characters)
$class = preg_replace("/[^a-z0-9A-Z_-]/", "", $class);
//Classes only begin with an underscore or letter
$class = preg_replace("/^-*[0-9]+/", "", $class);
//Make sure the string is 2 or more characters long
return 2 <= strlen($class) ? $class : '';

Мы можем использовать все символы в качестве имени класса. Даже как # и .. Просто нам нужно избежать этого с помощью \.

.test\.123 {
  color: red;
}

.test\#123 {
  color: blue;
}

.test\@123 {
  color: green;
}

.test\<123 {
  color: brown;
}

.test\`123 {
  color: purple;
}

.test\~123 {
  color: tomato;
}

<div class = "test.123">test.123</div>
<div class = "test#123">test#123</div>
<div class = "test@123">test@123</div>
<div class = "test<123">test<123</div>
<div class = "test`123">test`123</div>
<div class = "test~123">test~123</div>