适当的嵌套 - 命名空间冲突

Question

我需要一些关于嵌套HTML元素的建议。我有一个通用结构，其中X包含New部分（我将添加用于创建X的表单元素）和List部分，其中显示X已存在：

<div id="X">
    <div id="New">
    ...
    </div>
    <div id="List">
    ...
    </div>
</div>

现在事实证明我需要在页面上有两个：

<div id="X">
...
</div>

<div id="Y">
...
</div>

所以虽然我可以像这样区分2 New：

#X #New {} /* in CSS */
$('#Y #New') /* in jQuery */

我感到遗憾的是#New在文档中应该是独一无二的...所以另外一种选择可能是：

<div id="X">
    <div id="XNew">
    ...
    </div>
    <div id="XList">
    ...
    </div>
</div>

然后使用X进行嵌套（作为命名空间）的概念似乎没有实际意义，因为我已经将名称弄平了......或者可能是另一个：

<div id="X">
    <div class="New">
    ...
    </div>
    <div class="List">
    ...
    </div>
</div>

但是我在这里使用的是一个我真正想要指定单个元素的类。你们都是这样做的？

Answer 1

ID 始终是唯一的。这就是为什么他们被称为标识符。在这种情况下，使用类是正确的解决方案。然后，您可以通过#X .New和#x .List轻松引用这些元素。这也可以更轻松地将常用样式和行为应用于所有List和New div。