it-roy-ru.com

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

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

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

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

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

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

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

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

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

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

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

978
Triptych

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

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

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

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

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

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

155
Robert Siemer

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

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

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

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

66
Jason S

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

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

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

CSS:

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

JavaScript:

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

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

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

23
Gumbo

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

.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 с именами, которые начинаются с допустимых чисел?
7
D.Tate

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

5
Marius

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

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

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

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

4
mofaha