CSS 和 jQuery：.name 与 name^=（即类与“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>

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

使用 (1) 或 (3) 比 (2) 有什么优势吗？

Answer 1

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

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

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

类选择器通常也经过优化，因此在 CSS 和 jQuery 中匹配起来要简单得多。由此产生的性能差异并不显着，但如果您可以按类匹配完全相同的元素，则没有理由不使用类选择器而不是属性选择器。因此，同样，如果您要将三个元素作为一个组进行样式设置或操作，请为它们分配一个类名并按该类进行选择。

Answer 2

这完全取决于情况。就我个人而言，我不关心节省那些纳秒，而是想编写一个每个开发人员都能理解的更干净的 html（更多基于类，因为 id 可以在 javascripting 中更多地使用）

您显然可以使用 class、tags、child + siblings selectors、nth-child 编写整个 html。

只是一个例子：

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

如果你分配id=something to a tag，同样的事情可以做：

#something{
color:red;
}

使用类：仅当多个 dom 元素共享相同特征时。

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

但归根结底。这一切都归结为编写更清晰、更简单且易于理解的代码。