为什么HTML ID不像命名空间那样工作？

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更符合命名空间隐喻的工作方式？

Answer 1

使用class.

只id标识该元素和该元素.它就像是指向C++中对象的指针.没有a的元素id就像是没有命名(？)指针的对象.

Classes就像属性一样.元素可以具有零个或多个classes 的任何组合.他们给你你想要的东西.

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