Какие допустимые значения для атрибута id в HTML?

Строго это должно соответствовать

[A-Za-z][-A-Za-z0-9_:.]*

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

От спецификации HTML 4...

идентификатор и маркеры ИМЕНИ должны начаться с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифрами ([0-9]), дефисы (" - "), подчеркивания (" _ "), двоеточия (": "), и периоды (". ").

РЕДАКТИРОВАНИЕ: d'oh! Избитый к кнопке, снова!

На практике много использования сайтов id атрибуты, запускающиеся с чисел, даже при том, что это - технически не допустимый HTML.

черновая спецификация HTML 5 ослабляет правила для id и name атрибуты: они - теперь просто непрозрачные строки, которые не могут содержать пробелы.

Кроме того, никогда не забывайте, что идентификатор уникален. После того, как используемый, Значение идентификатора не может появиться снова нигде в документе.

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

, С другой стороны, существует элемент класса. Точно так же, как идентификатор это может много раз появляться, но значение может использоваться много раз.

От спецификация HTML 4:

идентификатор и маркеры ИМЕНИ должны начаться с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифрами ([0-9]), дефисы (" - "), подчеркивания (" _ "), двоеточия (": "), и периоды (". ").

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

Можно технически использовать двоеточия и периоды в атрибутах идентификатора/имени, но я настоятельно рекомендовал бы избежать обоих.

В CSS (и несколько библиотек JavaScript как jQuery), и период и двоеточие имеют особое значение, и Вы столкнетесь с проблемами, если Вы не будете осторожны. Периоды являются селекторами класса, и двоеточия являются псевдоселекторами (например, ": толпитесь" для элемента, когда мышь будет по нему).

, Если Вы даете элементу идентификатор "мой cool:thing", Ваш селектор CSS будет похож на это:

#my.cool:thing { ... /* some rules */ ... }

, Который действительно говорит, "элемент с идентификатором 'моего', классом 'прохладных' и 'вещи' псевдоселектор" в CSS - говорят.

Придерживаются A-Z любого случая, чисел, подчеркиваний и дефисов. И, как сказано выше, удостоверьтесь, что Ваши идентификаторы уникальны.

, Который должен быть Вашим первым беспокойством.

jQuery делает дескриптор любое допустимое идентификационное название. Просто необходимо выйти из метасимволов (т.е. точки, точки с запятой, квадратные скобки...). Это похоже на высказывание, что JavaScript имеет проблему с кавычками только потому, что Вы не можете записать

var name = 'O'Hara';

Селекторы в API jQuery (см. подстрочное примечание)

Похоже, что хотя двоеточия (:) и точки (.) Действительны в спецификации HTML, они недопустимы в качестве селекторов идентификаторов в CSS , поэтому лучше их избегать, если вы намерены использовать их для этой цели.

С тех пор ES2015 мы можем также использовать - почти весь unicode символы для идентификатора, если набор символов документа установлен на UTF8.

Тест здесь: https://mothereff.in/js-variables

Read о: https://mathiasbynens.be/notes/javascript-identifiers-es6

В ES2015, идентификаторы должны запуститься с $, _, или любой символ с Unicode полученное базовое свойство ID_Start.

Остальная часть идентификатора может содержать $, _, нестоляр нулевой ширины U+200C, столяр нулевой ширины U+200D или любой символ с Unicode полученное базовое свойство ID_Continue.

const target = document.querySelector("div").id
console.log(
   target
)
document.getElementById(target).style.backgroundColor = "black"

div {
  border: 1px black solid;
  width: 100%;
  height: 200px
}

<div id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜">

Дефисы, подчеркивания, периоды, двоеточия, цифры и буквы - все они действительны для использования в CSS и JQuery. Следующее должно работать, но оно должно быть уникальным на всей странице и также должно начинаться с буквы [A-Za-z].

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

<html>
<head>
<title>Cake</title>
<style type="text/css">
    #i\.Really\.Like\.Cake {
        color: green;
    }
    #i\:Really\:Like\:Cake {
        color: blue;
    }
</style>
</head>
<body>
    <div id="i.Really.Like.Cake">Cake</div>
    <div id="testResultPeriod"></div>

    <div id="i:Really:Like:Cake">Cake</div>
    <div id="testResultColon"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var testPeriod = $("#i\\.Really\\.Like\\.Cake");
            $("#testResultPeriod").html("found " + testPeriod.length + " result.");

            var testColon = $("#i\\:Really\\:Like\\:Cake");
            $("#testResultColon").html("found " + testColon.length + " result.");
        });
    </script>
</body>
</html>