Почему HTML идентификаторы не работают как пространства имен?

Question

Мне кажется, что HTML поддержит это:

<div id="comment1">
    <div id="helpText">...</div>
</div>

<div id="comment2">
    <div id="helpText">...</div>
</div>

<div id="comment3">
    <div id="helpText">...</div>
</div>

#comment1#helpText
#comment2#helpText
#comment3#helpText

Но поскольку идентификаторы HTML должны быть уникальными, мне нужно сделать следующее:

<div id="comment1">
    <div id="helpText1">...</div>
</div>

<div id="comment2">
    <div id="helpText2">...</div>
</div>

<div id="comment3">
    <div id="helpText3">...</div>
</div>

#comment1#helpText1
#comment2#helpText2
#comment3#helpText3

Это кажется излишне избыточным, особенно когда у меня есть несколько вложенных DIV:

<div id="comment1">
    <div id="header1">...</div>
    <div id="introduction1">...</div>
    <div id="helpText1">...</div>
    <div id="footer1">...</div>
</div>

<div id="comment2">
    <div id="header2">...</div>
    <div id="introduction2">...</div>
    <div id="helpText2">...</div>
    <div id="footer2">...</div>
</div>

<div id="comment3">
    <div id="header3">...</div>
    <div id="introduction3">...</div>
    <div id="helpText3">...</div>
    <div id="footer3">...</div>
</div>

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

Answer 1

Использование class.

id идентифицирует этот элемент и только этот элемент. Это как указатель на объект в C ++. Элементы без id похожи на объекты без именованных (?) Указателей на них.

Class как атрибуты. Элементы могут иметь ноль или более любой комбинации class es. Они дают вам то, что вы хотите.

/* CSS */
#comment1 .header
#comment3 .helpText

<!-- (X)HTML -->
<div id="comment1">
    <div class="header">...</div>
    <div class="introduction">...</div>
    <div class="helpText">...</div>
    <div class="footer">...</div>
</div>

Сам по себе DOM не имеет хороших селекторов для Javascript (и других языков сценариев), но наборы инструментов, такие как JQuery, позволяют красиво выбирать элементы по имени класса.

Answer 2

Возможно, вы захотите задать вопрос: «Зачем нам вообще нужны идентификаторы в CSS?» - если класс может быть уникальным или неуникальным, зачем нам нужен другой тип идентификатора с необходимостью быть уникальным?

Мой ответ будет таким: нам они не нужны в CSS, но они нужны для других целей в DOM. Например, элемент <label> может определить, какой другой элемент он помечает, используя уникальный идентификатор этого элемента.

И если они будут там в DOM, нам нужен доступ к ним в CSS.

Answer 3

В первом примере вы можете использовать это:

#comment1 .helpText
#comment2 .helpText
#comment3 .helpText

Вам не нужно определять идентификатор для элементов helpText, но класс с class="helpText".

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

#comment1 div
#comment2 div
#comment3 div

Если вы хотите манипулировать всеми дочерними узлами узла «комментарий», вы можете добавить class="comment" в эти div комментариев и получить к ним доступ

div.comment

Answer 4

Что сказал Стеш. Как это:

 <div id="comment1">
    <div class="helpText">...</div>
</div>

<div id="comment2">
    <div class="helpText">...</div>
</div>

<div id="comment3">
    <div class="helpText">...</div>
</div>

и затем:

#comment1.helpText
#comment2.helpText
#comment3.helpText

Answer 5

Используйте классы.

Answer 6

как пишет Стрейджер: используйте класс.

И помните, элемент может принадлежать нескольким классам одновременно:

<div id="comment1">
    <div class="header introduction">...</div>
    <div class="introduction">...</div>
    <div class="footer introduction somethingelse">...</div>
</div>