Question

我永远不确定选择元素的最佳（最有效）方式是什么。

假设我有以下布局（非常简单的例子）

<div id="navigation">
  <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
  </ul>
</div>

我想选择无序列表（确保我不会影响我网站上的任何其他UL），我应该#navigation ul {}还是为UL分配课程？
我想选择我的列表项，再次确保我只影响那些。我应该navigation ul li{}还是分配课程？
最后，如果我想选择我的第一个链接并为其设置样式，我应该#navigation ul li:first-child {}还是分配课程？

我很欣赏这些问题几乎是一样的，但是我很好奇你何时应该使用课程，什么时候不要。

Answer 1

这里没有硬性和快速的答案。

一般的经验法则可能是在你想要将某些元素组合在一起时使用类，对它们进行相同处理，使用类是唯一的方法。

例如，在你的上一个例子中，完全不需要一个类。

但是，使用示例3中的类将获得更好的性能，因为浏览器将更快地找到相关项。与此相反的是，代码清晰度略有下降。如果你在所有的东西上都有类名，那么阅读标记的其余部分会变得更加困难。

简而言之，在上面所示的内容中，您所写的内容很精致。

您应该阅读this文章，其中包含选择器效率。

基本上效率的顺序如下：

ID, e.g. #header
Class, e.g. .promo
Type, e.g. div
Adjacent sibling, e.g. h2 + p
Child, e.g. li > ul
Descendant, e.g. ul a
Universal, i.e. *
Attribute, e.g. [type="text"]
Pseudo-classes/-elements, e.g. a:hover

类和Id之间的性能差异通常是无关紧要的。

然而，在列表中走得更远，事情发生了很大的变化。

这不是在任何地方添加类和id的论据 - 它只是让你判断性能和可维护性之间的权衡。

Answer 2

#id应该是唯一的，而课程则不应该。

所以如果你需要添加一些JS - 你需要#id，如果你只想设置不同的元素，.class很好。

Answer 3

我认为这实际上取决于#navigation元素下面结构的复杂程度。使用#navigation元素引用所有内容可能是好的，如果它是一个像你所示的简单结构，但对我来说如果它更复杂或者将有不同的ul，li元素需要不同的行为然后我会id / class嵌套元件。

Answer 4

对于Javascript用法，我认为比使用本机选择器更快，没有类或id。

有关详细信息，我认为只需使用复杂代码测试此理论（查看不同的时间）。

不要忘记javaScript的速度更快取决于您的浏览器。

对于CSS，一篇好文章是here以获取更多详细信息。

我是否应该为所有内容添加类/ ID，或使用其他选择器

4 个答案: