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

Полное регулярное выражение выглядит следующим образом:

-?(?:[_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.

Да, в названиях классов в CSS можно использовать все символы, включая такие, как # и ., но для этого нужно экранировать их с помощью обратного слэша \. Вот пример, как это работает:

.test\.123 {
  color: red;
}

.test\#123 {
  color: blue;
}

.test\@123 {
  color: green;
}

.test\<123 {
  color: brown;
}

.test\`123 {
  color: purple;
}

.test\~123 {
  color: tomato;
}

И соответствующий HTML код:

<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>

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