html - 为什么 HTML id 不像 namespace 那样工作？

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 id 必须是唯一的，我需要这样做:

<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 id 更符合 namespace 隐喻的工作原理？

Answer 1

使用类。

id 标识该元素并单独标识该元素。它就像 C++ 中指向对象的指针。没有 id 的元素就像没有命名(？)指向它们的指针的对象。

Classes 就像属性。元素可能有零个或多个 class 的任意组合。他们给你你想要的。

/* 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 这样的工具包允许您很好地按类名选择元素。