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

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

давайте читать w3.org документация:

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

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

css lang-css prettyprint-override">#red {
  color: red;
}
<p id="red">I am a red text.</p>
<p id="red">I am a red text too.</p>

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

12
css css-selectors html

3 ответов

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

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

например: 

document.getElementById('red');

получит только первый.

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

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

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

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

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

29

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

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

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

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

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

уникальность идентификаторов в HTML-документе не применяется или не принимается CSS; вместо этого селекторы spec просто констатирует это:

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

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

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

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

#chapter1

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

*#z98y

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

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

где "conformant" означает соответствие HTML, а не CSS. Имейте в виду, что этот текст не присутствует в спецификация уровня 2, которую вы цитируете в своем вопросе.

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

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

5

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

с jQuery API документация:

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

1