Вопрос по css-selectors, css, html – Использовать один и тот же идентификатор для нескольких тегов HTML? [Дубликат]

7

Possible Duplicate:
Several elements with the same ID responding to one CSS ID selector

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

Что я должен делать?

В этом примере он работает так же, как класс

код:

<html>
<head>
<style>

#exampleID1 { background-color: blue; } 
#exampleID2 { text-transform: uppercase; } 

</style>
</head>
<body>
<p id="exampleID1">This paragraph has an ID name of "exampleID1" and has a blue CSS defined background.</p>
<p id="exampleID2">This paragraph has an ID name of "exampleID2" and has had its text transformed to uppercase letters.</p>

<address id="exampleID1">

Written by W3Schools.com<br />
<a href="mailto:[email protected]">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>


<blockquote id="exampleID1">
Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.
</blockquote>

</body>
</html>

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

CSS действительно не волнует, используете ли вы ID и классы. Javascript заботится. Javascript очень волнует. SpaceBeers
То, что ты не можешь, не означает, что ты должен. BoltClock♦

Ваш Ответ

5   ответов
0

why we should not use id selector two times in a page while its working fine

Потому что вы не знаете, нормально ли это работает в каждом браузере.

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

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

2

Это работает, но это не то, как идентификаторы предназначены для использования (в соответствии со спецификациями HTML). Идентификатор должен ссылаться только на один объект. Описание нескольких объектов должно быть сделано с помощью класса, а не идентификатора.

1

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

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

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

$('#exampleID1').hide();

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

Но$('*#exampleID1').hide() работает. Просто записка.
17

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

why we should not use id selector two times in a page while its working fine.

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

И особенно JavaScriptwill перерыв в зависимости от того, что вы делаете с дубликатами ID. Тот факт, что существует только один элемент с заданным идентификатором, позволяет браузеру делать всевозможные предположения / оптимизации при обходе дерева.
спасибо за прояснение моих сомнений. gaurav rathor
6

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

Затем представьтеclass в качестве кода продукта, например, может быть штрих-код. В супермаркете все равные продукты имеют одинаковый штрих-код, который считывается оптическим считывателем.

Итак,ID является уникальным идентификатором иclass группирует группу элементов.

Но если я использую то же самоеID в моем HTML / CSS я получаю идеальный результат, почему я должен беспокоиться об уникальныхIDs?

Reason number 1:

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

Reason number 2

Ваш код не будет проверен W3C, что означает, что у вас могут возникнуть головные боли из-за совместимости вашего сайта в разных браузерах. Он может нормально работать в одном браузере, а в другом - нет.

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

<blockquote id="exampleID1">
Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.
</blockquote>

С Javascript / JQuery вы будете использовать такой код:

$("#exampleID1").html("Changing element content");

А потом текст элемента<blockquote id="exampleID1"> будет обновлен, но элемент ниже также будет обновлен, потому что он имеет тот жеID.

<p id="exampleID1">This paragraph has an ID name of "exampleID1" and has a blue CSS defined background.</p>

Итак, если вы хотите обновить только один элемент, они должны иметь уникальныйIDs.

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

Привет, что если я использую document.getElementbyId (& quot; результат & quot;). Innerhtml = d; и я хочу несколько div с id = & quot; результат & quot ;. Какая хорошая работа для этого?
@KalaJ, я думаю, что использование класса ум может решить эту проблему

Похожие вопросы