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 ++中对象的指针。没有id的元素就像没有命名（？）指针的对象。

Class es就像属性一样。元素可以具有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

在第一个例子中，你可以使用它：

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

您不必为helpText元素定义id，而是定义class="helpText"的类。

您还可以使用以下规则操纵所有子div：

#comment1 div
#comment2 div
#comment3 div

如果你想操纵“评论”节点的所有孩子，你可以将class="comment"添加到这些评论div并使用

访问它们

div.comment

Answer 3

您可能实际上想问一个问题，“为什么我们在CSS中根本需要ID？” - 如果一个类可以是唯一的也可以是非唯一的，为什么我们需要另一种必须具有唯一性的标识符？

我的回答是我们在CSS中实际上并不需要它们，但它们在DOM中需要用于其他目的。例如，<label>元素可以使用该元素的唯一ID来标识它标记的其他元素。

如果他们将在DOM中出现，我们需要在CSS中访问它们。

Answer 4

使用课程。

Answer 5

stesch说的是什么。像这样：

 <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 6

当strager写道：

使用类。

请记住，一个元素可以同时属于几个类：

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

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

6 个答案: