Несколько элементов с одинаковым идентификатором отвечают на один селектор идентификатора CSS

Question

Безопасно ли присваивать нескольким элементам одинаковый идентификатор на одной странице?Например, это часто случается при использовании некоторых плагинов jquery, когда вы запускаете слайдер или галерею дважды или более.Мы знаем, что разработчикам нравится присваивать некоторый идентификатор контейнеру html, чтобы скрипт работал быстрее.

Давайте прочитаем документацию w3.org :

Что делаетОсобые атрибуты типа ID заключаются в том, что никакие два таких атрибута не могут иметь одинаковое значение;Независимо от языка документа, атрибут ID может быть использован для уникальной идентификации его элемента.

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

#red {
  color: red;
}

<p id="red">I am a red text.</p>
<p id="red">I am a red text too.</p>

Кто-нибудь может объяснить эту странную ситуацию?

Answer 1

Браузеры всегда пытаются «молча провалиться».Это означает, что даже если ваш HTML-код недействителен, браузер попытается угадать, каково было ваше намерение, и обработать его соответствующим образом.

Однако отклонение от спецификации может вызвать некоторые очень непредвиденные побочные эффекты.

Например:

document.getElementById('red');

даст вам только первый.

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

Короче: Не делайте этого!Если вам нужно настроить таргетинг на несколько элементов с одинаковым CSS, используйте имя класса.Вот для чего они были предназначены ...

---

Сказав это;если вам действительно нужно выбрать несколько элементов с одинаковым идентификатором, используйте селектор атрибутов:

document.querySelectorAll('p[id="red"]');

Обратите внимание, что это не работает в IE7 и ниже ...

Answer 2

Безопасно ли присваивать нескольким элементам один и тот же идентификатор на одной странице?

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

Хотя было показано, что браузеры ведут себя одинаково, дажеесли вы сделаете это (к счастью, в ситуациях, когда это невозможно сделать), я бы не назвал это полностью «безопасным», поскольку такое поведение может быть непоследовательным или ненадежным.

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

Кто-нибудь может объяснить эту странную ситуацию?

Уникальность идентификаторов в документе HTML не обеспечивается и не предполагается CSS;вместо этого Спецификация селекторов просто утверждает это:

Селектор идентификатора представляет экземпляр элемента, который имеет идентификатор, который совпадает с идентификатором в селекторе идентификатора.

Обратите внимание на использование слова «an» во всем этом предложении.

После этого утверждения приведены некоторые примеры использования, в которых вместо этого используется слово «any»:

СледующееСелектор идентификатора представляет любой элемент, у которого атрибут с типом ID имеет значение "chapter1":

#chapter1

Следующий селектор представляет любой элемент, у которого атрибут с типом ID имеет значение "z98y".

*#z98y

Предположение о соответствии документа уточняется на уровне 3 спецификации селекторов, в начале раздела (выделение):

Что делает атрибуты типа ID особенными, так эточто никакие два таких атрибута не могут иметь одинаковое значение в соответствующем документе независимо от типа элементов, которые их переносят;Независимо от языка документа, атрибут с типом ID можно использовать для уникальной идентификации его элемента.

Где «соответствие» относится к соответствию HTML, а не CSS.Помните, что этот текст отсутствовал в спецификации уровня 2, которую вы цитируете в своем вопросе.

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

Другими словами: только потому, чтоВы можете, не значит, что вы должны.

Answer 3

Это работает с простым стилем HTML, но не будет работать с запросами.

Из документации jQuery API :

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