Нормально ли иметь два элемента с одинаковым идентификатором в двух элементах div с другим идентификатором: обновлено

Question

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

<div id="div1">
     <img id="loading" />
</div>
<div id="div2">
     <img id="loading" />
</div>

и css:

#div1 #loading
{
    some style here...
}
#div2 #loading
{
    another style here...
}

отлично работает для меня, но возможноэто не рекомендуется делать так?

Спасибо

ОБНОВЛЕНИЕ

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

$("#div1 #loading")..., это становится уникальным элементом.не так ли?

Окончательное обновление

Используйте предложенный принцип, если у вас есть для этого причины!;)

Answer 1

Измените свой идентификатор на класс.Не стоит давать дубликаты идентификаторов.

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

Ваш путь не совместим с разными браузерами и сильно повлияет на кодирование JavaScript, отправленную форму и т. Д.

Вы можете получить тот же эффектиспользуя класс

см.

<div id="div1">
     <img class="loading" />
</div>
<div id="div2">
     <img class="loading" />
</div>

и css:

#div1 .loading
{
    some style here...
}
#div2 .loading
{
    another style here...
}

Answer 2

идентификатор должен (должен) быть уникальным !!

у вас будут проблемы при выборе его через JS в большинстве браузеров - лучше использовать класс

Answer 3

Основная причина - манипулирование DOM JavaScript.В вашем случае, если вы сделаете что-то подобное ...

document.getElementById("loading")

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

Answer 4

Только потому, что никто не опубликовал его - спецификация HTML, раздел с идентификатором , в котором говорится:

id = name [CS]

Этот атрибут присваивает имя элементу.Это имя должно быть уникальным в документе.

Answer 5

Unique

В математике и логике фраза «есть один и только один» используется для указания того, что существует ровно один объект с определенным свойством.

#div1 #loading не исправляет тот факт, что у вас есть два экземпляра #loading в вашего документа . Так что нет, не делай этого.

Answer 6

Да, вы правы, делать это не рекомендуется. Идентификатор всегда должен быть уникальным (например, если вы хотите выбрать элемент с помощью JavaScript). Если вы просто хотите добавить тот же стиль в div, просто используйте класс css.

Answer 7

ID должны быть уникальными, поэтому id1 и id2 хороши, но для многих элементов с одинаковым стилем используйте HTML-класс и селектор класса CSS:

.loading
{
styles here
}

Это разрешено повторять столько раз, сколько вы хотите на странице:)

Answer 8

Это нормально?Нет.

Рекомендуется?Точно нет!Это на самом деле запрещено (но исполнение слабое).

Но это (по-видимому) работает, так что ...

Answer 9

https://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#adef-id

НО!

Если вам это нужно в вашем проекте, вы можете использовать его, как предложено в моем Вопросе Окончательное обновление !

Answer 10

Идентификаторы используются для различения элементов, они должны быть уникальными по разным причинам, одним из них является использование javascript, функция вроде getElementById не будет работать хорошо, если у вас есть дубликат ID, вы не сможете предсказать, что это будет происходить в разных браузерах, поскольку JS по-разному реализуется в каждом браузере.

Если вы хотите использовать такую ​​структуру, как загрузка #div и загрузка # div2, очевидно, что обе загрузки имеют одинаковое использование, поэтому они должны быть классами и будут использоваться следующим образом

# div1.loading и # div2.loading

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

.loading {стиль, общий для загрузки}

# div1.loading {стиль, используемый только при загрузке в div1}

# div2.loading {стиль, используемый только при загрузке в div2}