Html 我应该为所有内容添加类/id，还是使用其他选择器

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

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

链接1
链接2
链接3

我想选择我的无序列表（确保我不会影响整个网站的任何其他UL），我应该做

#navigation UL{}

还是给UL分配一个类

我想选择我的列表项目，再次确保我只影响那些项目。我应该做

导航{}

还是分配一个类

最后，如果我想选择我的第一个链接并设置它的样式，我应该做

#navigation ul li:first child{}

还是分配一个类

我理解这些问题几乎是一样的，但我很好奇你什么时候应该使用一个类，什么时候不应该使用

#id应该是唯一的，类不应该是唯一的

---

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

我认为这实际上取决于#导航元素下面的结构最终会有多复杂。使用#navigation元素引用所有内容，如果它像您所示的那样是一个简单的结构，那么可能是可以的，但是对于我来说，如果它更复杂或者具有不同的ul、li元素，需要不同的行为，那么我会对嵌套的元素进行标识/分类。

这里没有明确的答案

一般的经验法则可能是，当您想要将某些元素组合在一起时，使用类，对它们一视同仁，使用类是唯一的方法

例如，在上一个示例中，严格来说不需要类

但是，使用示例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的论点——它只是让你判断性能和可维护性之间的平衡。

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

关于更多的细节，我想用复杂的代码来测试这个理论（参见不同的时间）

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

---

对于CSS来说，一篇好文章是为了获得更多细节。

他并不是在问ID和类之间的区别。+1，回答不错。谢谢你的链接。其中一些我知道，但这是一次很好的讨论。我唯一可能不同意的是

id

与

class

之间的不相关性。我认为，如果在许多项目上使用

类

，那么这些项目之间的速度差异可能会更明显（图中10000个项目设置了

类

，而

id仍然唯一）。然而，不可否认，这将是一种特殊情况，在大多数情况下，你和文章中关于无关性的观点可能都是正确的。对于1、2和3-如果在你的
导航
div中有任何其他
ul
，你将如何区分它们？这是一个非常简单的答案，只有你能回答。这完全取决于页面上的布局/项目。如果您可以使用类/id这样做，它将使您引用项目的任务更加紧凑，并且对其他人更具可读性。。。措辞错误。类和id都是选择器，所以说真的，最好说“我应该把一个类/id添加到所有内容中，还是使用其他选择器呢？”我打算这样编辑它。
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