1

考虑以下三种情况：

(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>通过相应地使用.zonesordiv[id^=zone]选择器（在 CSS 和 jQuery 中）来定位每个，

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

4

2 回答 2

3

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

如果您打算选择选项 3，因为您需要 ID 和类，那就是您考虑选择器之间的区别的时候。

在 CSS 中，由于缺少类型选择器（类选择器和属性选择器本身同样具体），所以没有.zones那么具体。div[id^=zone]当然，如果你想平衡两个选择器的特殊性，你可以考虑div.zones代替.zones.

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

于 2013-11-04T05:43:45.373 回答
0

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

显然，您可以使用 class、tags、 child + 兄弟选择器、nth-child编写整个 html 。

只是一个例子：

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

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

#something{
color:red;
}

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

使用 Id's: 仅当不同的 dom 元素共享独特的特性时。

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

于 2013-11-04T06:11:01.557 回答