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

Ответ 1

Вы можете проверить непосредственно в грамматике CSS.

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

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

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

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

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

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

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

Ответ 2

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

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

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

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

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

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

Ответ 3

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

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

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

edit 2: как @mipadi указывает в ответе Triptych, там caveat, также на той же веб-странице:

В 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 парсер, независимо от того, они поддерживают любые специфические для поставщика расширения.

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

Ответ 4

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

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

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

CSS

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

JavaScript:

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

Ответ 5

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

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

Ответ 6

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

.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 :) */

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

Источники:

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

Ответ 7

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

Ответ 8

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

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

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

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

Ответ 9

В принципе, все принятые символы, ожидание пробела, все символы Unicode также разрешены... так что вы можете использовать Numbers или Characters, но в то же время всегда старайтесь следовать наивысшей практике для вашего CSS! Бесполезное, не значащее именование для CSS может создать большой беспорядок в вашей структуре кода...

Ответ 10

Исходя из ответа @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 : '';