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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В CSS идентификаторы могут начинаться с «-» (тире) или «_» (подчеркивание). Ключевые слова и имена свойств, начинающиеся с «-» или «_», зарезервированы для расширений, зависящих от поставщика. Такие расширения для конкретного поставщика должны иметь один из следующих форматов:

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

Примеры):

Например, если организация XYZ добавила свойство для описания цвета границы на восточной стороне дисплея, они могут называть его -xyz-border-east-color.

Другие известные примеры:

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

Первоначальная тире или подчеркивание гарантировано никогда не будут использоваться в свойстве или ключевом слове любым текущим или будущим уровнем CSS. Таким образом, типичные реализации CSS не могут распознавать такие свойства и могут игнорировать их в соответствии с правилами обработки ошибок синтаксического анализа. Однако, поскольку начальная тире или подчеркивание является частью грамматики, разработчики CSS 2.1 всегда должны иметь возможность использовать синтаксический анализатор, совместимый с CSS, независимо от того, поддерживают ли они какие-либо расширения для конкретного поставщика.

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

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

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

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

CSS:

  

JavaScript:

  

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

 -?(?:[_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 backslash foo\~bar или с помощью юникодной нотации foo\7E bar .

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

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

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

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

Источники:

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

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

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

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

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

  • В каком направлении двигатели селектора читают, точно?
  • Селектор CSS3: первый тип типа с именем classа?
  • Как выбрать первый, второй или третий элемент с заданным именем classа?
  • Как написать: условие зависания для: before и a: after?
  • В чем разница между псевдоclassом и псевдоэлементом в CSS?
  • Какие селектора CSS3 действительно поддерживают jQuery, например: nth-last-child ()?
  • Что означает селектор CSS>> (больше, чем знак)?
  • Обработка двоеточия в идентификаторе элемента в селекторе CSS
  • Селектор CSS (идентификатор содержит часть текста)
  • Селектор CSS для имен атрибутов на основе шаблона
  • jQuery: выбрать class элемента и идентификатор одновременно?
  • Interesting Posts
    Давайте будем гением компьютера.