через - присвоить стиль css




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

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

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

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

В основном 1 , имя должно начинаться с подчеркивания ( _ ), дефиса ( - ) или буквы ( 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 .

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

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


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


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

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

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

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

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

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


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

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


Я подробно ответил на ваш вопрос: explanation

В статье также объясняется, как избежать любого символа в 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>

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

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

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

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





css-selectors