поведение браузеров для приложения css, когда несколько элементов имеют одинаковый идентификатор

Question

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

В моем предварительном тестировании кажется, что они применяют правило CSS, специфичное для идентификатора, ко всем элементам с одинаковым идентификатором. Такое поведение, похоже, распространено в IE 8, Chrome, Firefox, Opera.

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

Answer 1

Вы правы, что касается "красивого" отображения CSS, исправление ошибок заключается в применении CSS, как если бы это был класс.

Какие могут быть непреднамеренные последствия в макете CSS из-за совместного использования одного и того же идентификатора среди нескольких элементов?

Не так много для фактического макета CSS, как упомянуто выше, но ..

вы, возможно, не сможете целенаправленно (изолировать элемент), если вам нужно, и / или специфичность селектора, необходимого для переопределения правила CSS с идентификатором уже в нем, может быть достигнута только путем добавленияуникальный идентификатор, продолжающий вознесение (или добавление встроенного <style>)

, также не думаю, что вы будете очень хорошо ладить, если вам нужно использовать jQuery или что-то подобное, Javascript использует идентификаторыдля лучшей функциональности

идентификаторы также Идентификаторы фрагмента - они не будут работать слишком хорошо, если они не уникальны

Answer 2

Пример непредвиденных последствий см. На вопрос, на который я ответил:

Еще одна ошибка IE "Ожидаемый объект" без информации

У вас естьэтот HTML, один раз для каждой вкладки:

<div class='tab' id='introduction'>
    <h2 id='introduction'>Introduction</h2>
</div>

<div class='body' id='introduction' style='display:block'>

Проблема в том, что вы указываете два элемента с помощью id='introduction'.

По различным причинам вам следуетне делайте этого:

• Это вызывает ошибки проверки.

  Строка 37, Столбец 27: введение дубликатов ID.
  Строка 36, Столбец 39:Первое появление ID было здесь.

• Это ломает ваши вкладки в IE7.

Answer 3

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

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