Какие символы допустимы в именах / селекторах классов CSS?
какие символы / символы разрешены в селекторах классов CSS? Я знаю, что следующие символы недействительным, но какие символы действительный?
~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] { } | ` #
8 ответов
вы можете проверить непосредственно в грамматики CSS.
в принципе1, имя должно начинаться с символа подчеркивания (_
), дефис (-
), или письмо(a
–z
), за которым следует любое количество дефисов, подчеркиваний, букв или цифр. Есть подвох: если первый символ-дефис, то второй символ должен быть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 :) */
кроме того, если есть несколько классов, вам нужно будет указать их в селекторе, я думаю.
источники:
Я понимаю, что подчеркивание технически допустимо. Проверьте:
https://developer.mozilla.org/en/underscores_in_class_and_id_names
"...ошибки в спецификации, опубликованной в начале 2001 года, впервые стали легальными."
в статье, связанной выше, говорится, что никогда не используйте их, а затем дает список браузеров, которые их не поддерживают, все из которых, по крайней мере, с точки зрения количества пользователей, давно ненужный.