使用类和 ID 的正确方法答案

【问题标题】：Right way to use class and ID使用类和 ID 的正确方法
【发布时间】：2009-04-05 20:07:59
【问题描述】：

复制：

Cascading style sheets use “id” or “class”

CSS: are class and id interchangeable?

div class vs id

CSS: div id VS. div class

有时，当我想选择一个 ID（唯一）到某物（图像）时，我使用 jquery 在悬停或单击时执行操作。

但同样的事情也可以用类来完成。我知道这个类有很多用途（比如说 class="selected"），但是当一个类被添加到某个东西时，我可以触发一个 jQuery 操作，该类插入了 ID...

所以问题是，如果我可以同时完成任何事情，那么使用类和 ID 的“正确方法”是什么！

【问题讨论】：

标签： jquery class

【解决方案1】：

在哪里使用 ID 与类

两者之间的简单区别在于，虽然一个类可以在一个页面上重复使用，但一个 ID 只能在每个页面上使用一次。因此，在标记页面主要内容的 div 元素上使用 ID 是合适的，因为只有一个主要内容部分。相反，您必须使用一个类来设置表格上的交替行颜色，因为根据定义，它们将被多次使用。

ID 是一个非常强大的工具。具有 ID 的元素可以是一段 JavaScript 的目标，该 JavaScript 以某种方式操纵该元素或其内容。 ID 属性可以用作内部链接的目标，将锚标记替换为名称属性。最后，如果您使您的 ID 清晰且合乎逻辑，它们可以作为文档中的一种“自我文档”。例如，如果块的开始标签的 ID 为“main”、“header”、“footer”，则不必在块之前添加注释说明代码块将包含主要内容"等。

【讨论】：

还要注意，一个元素只能有一个ID，但可以有多个类名（用空格分隔）。

【解决方案2】：

不同之处在于，ID 对文档来说是唯一的，因此它只能用于给定 HTML 页面上的一个元素。

另一方面，类更像是元素的类别。例如，如果您查看单个博客文章，通常会在其下方显示对该博客条目创建的 cmets，您可以为所有这些 cmets 指定类“comment”，并为单个博客条目指定 ID“条目” .

【讨论】：

【解决方案3】：

一个 HTML ID 只能应用于单个元素，而一个类可以用于多个元素，这使得它更加灵活。

【讨论】：

【解决方案4】：

ID 唯一标识整个文档中的一个元素，而类名就像一个“标签”——一个元素可以添加许多标签，并且这些标签可以重复使用。

这是一个比较列表：

您可以将多个类名添加到以空格分隔的元素，但您只能添加一个 ID。
您可以在多个元素上重复使用类名，但在整个文档中只能使用一次 ID。
ID 可用作 URL 上的片段标识符，浏览器将滚动到该 ID。例如，@987654321@<b>#someid</b>。类无法做到这一点。
ID 使在 Javascript 中查找特定元素变得更加容易和高效。例如，document.getElementById('someid')（或 jQuery 中的 $("#someid")）。请注意，像 jQuery 这样的库也可以通过类名来查找元素，但效率不高。

ID 的其他属性

一个元素可以同时包含一个 ID 和多个类名，如果 ID 与其中一个类名相同，这并不重要，也没有任何意义。
框架、iframe 和传统弹出窗口算作单独的文档，因此可以在这些不同窗口中的元素上使用相同的 ID。
一些浏览器没有正确遵循规范，允许多次使用同一个 ID，并且它在某些方面表现得像一个类名，但在document.getElementById() 中仍然可以工作。例如，基于该 ID 的 CSS 选择器可能会匹配多个元素，就好像它是一个类一样。这是一个非常混乱的情况，你永远不应该依赖它。如果浏览器停止尝试支持这一点，我会很高兴。

【讨论】：