在 HTML 和 CSS 中使用 MULTIPLE 'id' 和 'class' 属性的区别

Question

根据 CSS 原则，当我们想要实现样式的可重用性时，我们应该使用 class 属性，当我们知道整个 DOM 结构中有一个唯一元素时，我们应该对该元素使用 id 属性，然后指定一个风格。

但是在这个 Web 应用时代，DOM 结构可能过于复杂，存在重复id 的可能性。最好的例子是#title。它的名称可以出现在文档的任何位置。现在最好的部分是如果我在定义样式时使用#title 或.title（假设它们出现了不止一次并且具有不同的父级），CSS 生成的输出是相同的。这个 jsfiddle 将帮助你理解我的意思 http://jsfiddle.net/dewbot/LGAQD/

我的印象是，就像 JS Renderer 一样，CSS Parser 在发现第一个 #title 时会停止迭代，但它不会发生，它会一直迭代直到它达到 EOF，就像 class 一样。所以这就产生了一个问题，为什么我们应该使用多个class而不是id？

Answer 1

所以这就产生了一个问题，为什么我们应该使用多个class 而不是id？

Because the HTML spec says so，违反规则通常会导致代码损坏。

识别同一个 ID 的多个元素有意义吗？我想不是。这就是类的用途：分类相似的元素。

现在最好的部分是如果我在定义样式时使用#title 或.title（假设它们出现了不止一次并且有不同的父级），CSS 生成的输出是相同的。

这是自然行为，而不是任何这样做的浏览器中的错误本身。不过，它不是您应该依赖的那种行为，因为它处理不符合标准的标记，这通常很糟糕。

我的印象是，就像 JS Renderer 一样，CSS Parser 在发现第一个 #title 时会停止迭代，但它不会发生，它会一直迭代直到它达到 EOF，就像 class 一样。

现在这是错误的。 CSS 解析器在每个元素的基础上进行选择器匹配：它们不采用规则并遍历 DOM 将其应用于匹配它的任何元素；相反，他们获取每个元素并尝试将其与尽可能多的规则进行匹配。以这种方式工作，解析器不知道 ID 是否已在文档的其他地方使用，也不关心。它只是根据元素所说的匹配。 This answer 更详细地介绍了它。

只要一个元素有一个特定的 ID，它就必须匹配任何寻找该特定 ID 的 ID 选择器。因此，解析器应该将具有给定 ID 的任何和所有元素匹配到单个 ID 选择器，即使在 HTML 中具有相同 ID 的多个元素是不正确的。换句话说，CSS 并不强制要求 HTML 所要求的 ID 的唯一性。 This answer 解释。

综上所述，底线是：一次只为一个元素分配一个 ID，并使用类对多个相似元素进行分组。 不要试图变得聪明和违反规则。

Answer 2

我认为您对 CSS 的解析有误。浏览器不会逐行遍历 CSS 文件并将样式应用于 HTML 文件中的元素，反之亦然。浏览器解析 HTML，每当它找到 class 或 id 属性时，它就会在 CSS 文件中查找它。 （这非常简化，但有助于理解重点）。

仅仅因为如果你有多个ids 浏览器会正确呈现它并不意味着你应该这样做。 standard clearly says id 必须是唯一的。

Answer 3

你自己回答了。

CSS 确实将它应用于它可以找到的所有ids 和classes。但是，JS/jQuery 会在它找到的第一个实现它。

所以，你的问题变成了：

我应该将相同的ids 应用于许多元素以进行 JS 操作吗？答案：Baaaaa....D 决定

我应该将相同的id 应用于 CSS 的许多元素吗？答：还是不好，决定！但会执行你的规则

你也应该尝试使用分层方式应用的 CSS 和 JS 规则，这样你就永远不会出错。比如#Heading div#Title{css rules here} 或$('#Heading div#Titles')...jQuery rules here

接下来是尝试以保守的方式实现 id。

然后，尝试为您的网站/应用程序中的元素提供唯一 ID，而不是单个页面。这将使您免于包含在页面中的多页实用程序脚本。

例如：首页顶部的标题：#Home-Top-Heading

希望对你有帮助。

Answer 4

如果您在多个设备上使用相同的 ID，您的代码将无法通过验证 不止一个

CSS 不关心多个 id，javascript 关心

http://css-tricks.com/the-difference-between-id-and-class/