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

какие символы / символы разрешены в селекторах классов CSS? Я знаю, что следующие символы недействительным, но какие символы действительный?

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

8 ответов


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

в принципе1, имя должно начинаться с символа подчеркивания (_), дефис (-), или письмо(az), за которым следует любое количество дефисов, подчеркиваний, букв или цифр. Есть подвох: если первый символ-дефис, то второй символ должен быть2 быть буквой или подчеркиванием, и имя должно быть не менее 2 символов длинный.

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

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

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

2 обратите внимание, что, согласно грамматике, которую я связал, правило, начинающееся с двух дефисов, например --indent1, является недействительным. Тем не менее, я уверен, что видел это в практиковать.


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

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

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

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

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

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


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

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

в 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 реализаторы должен всегда иметь возможность использовать a CSS-соответствующий парсер, независимо от того, они поддерживают любого конкретного поставщика увеличение.

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


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

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

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

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 или используя обозначение unicode 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 года, впервые стали легальными."

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