我应该为所有事情添加一个类/标识，还是使用其他选择器

我不确定选择元素的最佳（最有效）方式是什么。我应该为所有事情添加一个类/标识，还是使用其他选择器

可以说我有如下的布局（非常简单的例子）

<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 {}还是分配一个类？

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

来源

2012-07-26 Andy

您的问题标题是......错误的。类和ID是选择器，所以真的，最好是说“我应该为所有事情添加一个类/ ID还是使用_other_选择器”。我要编辑它。 – ScottS 2012-07-26 14:29:31

对于1,2和3 - 如果你的'navigation' div中有任何其他'ul'，你将如何区分它们？这是一个非常简单的答案，只有你可以回答。这一切都取决于您的布局/页面上的项目。如果您可以使用class/id这样做，那么使您的引用项目的任务更加紧凑并且对其他人可读。 – JonH 2012-07-26 14:14:27

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

一般的经验法则可能是要使用类，当你想将某些元素分组在一起，对待他们一样，并使用类是唯一的手段。

在你的最后一个例子中，绝对不需要一个类。

但是，使用示例3中的类将导致更好的性能，因为浏览器将更快地找到相关项目。与此相反，代码易读性略有下降。如果您在所有内容上都有类名，那么读取标记的其余部分变得更加困难。

简而言之，在你上面显示的内容中，你写的是很好的imo。

您应该阅读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的参数 - 它只是允许您判断性能和可维护性之间的权衡。

来源

2012-07-26 14:15:58 BonyT

+1，很好的答案。感谢您的链接。我知道的一些，但这是一个很好的讨论。我唯一可能不同意的是'id'和'class'的无关性。我认为如果在许多项目上使用'class'，那么速度差异可能会更加明显（图片中的10000个项目带有'class'集合，而对于唯一的'id'）。然而，诚然，这将是一个特殊的情况，你和文章中关于不相关的观点在大多数情况下可能是正确的。 – ScottS 2012-07-26 14:46:16

是的 - 好点 - 我修改了我的答案;） – BonyT 2012-07-26 14:51:03

#id应该是唯一的，班级不应该。所以如果你需要添加一些JS - 你需要#id，如果你只是想风格不同的元素，.class是好的。

来源

2012-07-26 14:14:15 novus42

他并不是要求身份证和班级之间有什么区别。 – JonH 2012-07-26 14:15:08

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

来源

2012-07-26 14:14:52

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

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

不要忘了javaScript的更快取决于您的浏览器。

对于CSS，好文章是here了解更多详情。

来源

2012-07-26 14:22:22

我应该为所有事情添加一个类/标识，还是使用其他选择器

回答

相关问题