CSS和jQuery：.name vs name ^ =（即类vs“id数组”）

Question

考虑以下三种情况：

（1）：

<div class="zones"></div>
<div class="zones"></div>
<div class="zones"></div>

vs（2）：

<div id="zone1"></div>
<div id="zone2"></div>
<div id="zone3"></div>

vs（3）：

<div id="zone1" class="zones"></div>
<div id="zone2" class="zones"></div>
<div id="zone3" class="zones"></div>

假设您可以相应地使用<div>或.zones选择器（在CSS和jQuery中）来定位每个div[id^=zone]，

使用（1）或（3）优于（2）是否有任何优势？

Answer 1

ID的目的是唯一地标识元素。如果您不需要单独识别每个元素，则没有理由为每个元素分配ID。同样，如果您不需要将这三个元素相互关联，则没有理由为它们分配一个公共类名。

如果您要使用选项3，因为您需要ID和类，那么当您考虑选择器之间的区别时。

在CSS中，.zones是less specific而不是div[id^=zone]，因为缺少类型选择器（类选择器和属性选择器本身同样具体）。当然，如果你想平衡两个选择器的特异性，你可以考虑div.zones而不是.zones。

类选择器通常也经过优化，因此它们在CSS和jQuery中更容易匹配。由此产生的性能差异并不显着，但如果您可以按类匹配完全相同的元素，则没有理由不在属性选择器上使用类选择器。因此，再次，如果您要将三个元素作为一个组进行样式处理或操作，请为它们指定一个类名并按该类进行选择。

Answer 2

这完全取决于具体情况。我个人并不关心保存这些纳秒，并希望编写一个每个开发人员都能理解的更清晰的HTML（更多基于类，因为id可以在javascripting时使用更多）

您显然可以使用课程，标签，child + siblings selectors，nth-child来编写整个HTML。

只是一个例子：

.mainclass > .innerclass > a{
cloro:red;
}

如果您指定id=something to a tag：

，则可以执行相同的操作

#something{
color:red;
}

use class：仅当多个dom元素共享相同的特征时。

使用Id：仅当不同的dom元素共享独特的特征时。

但最终。所有这些都归结为编写更清晰，更简单和易懂的代码。