Использование # внутри объявления идентификатора CSS - PullRequest
1 голос
/ 13 февраля 2012

Обычно я бы использовал буквенно-цифровые символы с - и _ в любом html-классе или атрибуте id, но мне было интересно, возможно ли, чтобы он включал # в середине атрибута, например:

<div id = "my_css_id_#f4ed11">

Я не буду ориентировать это через CSS, это чисто для javasrcipt.

NOTE Причина, по которой я спрашиваю это не потому, чтоЯ хочу сделать это, но из-за некоторого связанного PHP-кода, сделанного кем-то, это облегчит эту часть проекта.

Спасибо

Ответы [ 3 ]

4 голосов
/ 13 февраля 2012

Конечно, вы можете. Действует в соответствии с HTML5.

Вам просто нужно экранировать символ в селекторе (для использования в CSS или JavaScript) . Для символа # это довольно просто; Вы можете просто использовать \#.

Вот инструмент, который расскажет вам, как экранировать любой символ в селекторе CSS / JS: http://mothereff.in/css-escapes#0foo%23bar С этой страницы:

<script>
  // document.getElementById or similar
  document.getElementById('foo#bar');
  // document.querySelector or similar
  $('#foo\\#bar');
</script>

P.S. На предмет странных символов в ID или class значения: http://mathiasbynens.be/notes/html5-id-class

1 голос
/ 14 февраля 2012

Я бы не рекомендовал это делать. Было бы трудно получить доступ к элементу с ID # ... # ... через CSS или даже Javascript, как вы заметили, так как # перегружен при программировании / кодировании.

Звучит так, будто вы хотите сохранить какой-то фрагмент данных. Вам известно, что стандарты W3C допускают атрибуты, начинающиеся с data- верно?

Например, вы можете сохранить часть данных, связанных с элементом, как таковую:

<p data-name="John Jones">I like alliteration.</p>

Эта статья подробно описывает атрибуты данных. http://ejohn.org/blog/html-5-data-attributes/

0 голосов
/ 13 февраля 2012

Лучше всего сделать проб и ошибок и посмотреть, работает ли он.Но с точки зрения псевдоселекторов, не должно быть проблем с наличием символа #.Для выбора вы бы использовали:

$("#my_css_id_#f4ed11")
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...