jquery - CSS 和 jQuery : . name vs name^= (即类 vs "id arrays")

Question

考虑以下三种情况:

(1):

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

对比(2):

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

对比(3):

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

鉴于您可以定位每个 <div>通过相应地使用 .zones或div[id^=zone]选择器(CSS 和 jQuery 中的)，

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

Answer 1

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

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

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

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