11

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

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

<div id="navigation">
  <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
  </ul>
</div>
  1. 我想选择我的无序列表（确保我不会影响整个站点的任何其他 UL），我应该#navigation ul {}为 UL 做还是分配一个类？
  2. 我想选择我的列表项，再次确保我只影响那些。我应该navigation ul li{}上课还是分配课程？
  3. 最后，如果我想选择我的第一个链接并为其设置样式，我应该做#navigation ul li:first-child {}还是分配一个类？

我很欣赏这些问题几乎相同，但我很好奇你什么时候应该使用课程，什么时候不使用。

4

4 回答 4

12

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

一般的经验法则可能是当您想将某些元素组合在一起时使用类，将它们视为相同并且使用类是这样做的唯一方法。

例如，在您的最后一个示例中，严格来说不需要类。

但是，使用示例 3 中的类会带来更好的性能，因为浏览器会更快地找到相关项目。对此进行权衡的是代码可读性略有降低。如果您在所有内容上都有类名，那么阅读其余标记将变得更加困难。

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

您应该阅读这篇文章，其中介绍了选择器的效率。

基本上效率的顺序如下：

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 的论据——它只是让您可以判断性能和可维护性之间的权衡。

于 2012-07-26T14:15:58.407 回答
0

#id 应该是唯一的，而 class 不应该。

所以如果你需要添加一些 JS - 你需要#id，如果你只是想为不同的元素设置样式，.class 就可以了。

于 2012-07-26T14:14:15.547 回答
0

我认为这真的取决于#navigation 元素下面的结构最终会变得多么复杂。使用#navigation 元素引用所有内容可能是可以的，如果它是一个简单的结构，就像你展示的那样，但对我来说，如果它更复杂或者会有不同的 ul，li 元素需要不同的行为，那么我会 id/class 嵌套元素。

于 2012-07-26T14:14:52.950 回答
0

对于 Javascript 的使用，我认为 to 比使用原生选择器更快，并且没有 class 或 id。

有关更多详细信息，我认为只是用复杂的代码测试这个理论（见不同的时间）。

不要忘记 JavaScript 的速度取决于您的浏览器。

对于 CSS，这里有一篇好文章了解更多详细信息。

于 2012-07-26T14:22:22.763 回答