ID 和 Class 的区别

ID 和类是“钩子”！

我们需要方法来描述 HTML/XHTML 文档中的内容。像 <h1>、<p> 和 <ul> 这样的基本元素通常可以完成任务，但我们基本标签集不能涵盖所有可能的页面元素类型或布局选择。为此，我们需要 ID 和类。例如 <ul id="nav">，这将使我们有机会专门针对此无序列表，以便我们可以将其独特地操作到页面上的其他无序列表。或者，我们的页面上可能有一节没有相关标签来表示它，例如页脚，我们可能会这样做：<div id="footer">。或者，也许我们在侧边栏中有一些框，用于以某种方式将那里的内容隔开：<div class="sidebar-box">。

这些 ID 和类是我们需要构建到标记中的“钩子”，以便我们可以访问它们。CSS 显然需要这些，以便我们可以构建选择器并进行样式设计，但其他 Web 语言（如 JavaScript）也依赖于它们。但是，它们之间有什么区别呢？

ID 是唯一的

• 每个元素只能有一个 ID
• 每个页面只能有一个元素具有该 ID

当我第一次学习这些东西时，我一遍又一遍地听到你应该只使用一次 ID，但你可以多次使用类。它基本上从一只耳朵进，另一只耳朵出，因为它对我来说更像是好的“经验法则”，而不是非常重要的东西。如果您纯粹是 HTML/CSS 人员，这种态度可能会持续存在，因为对您来说，它们实际上看起来并没有什么不同。

这里有一个：如果您在多个元素上使用相同的 ID，您的代码将无法通过验证。验证对我们所有人来说都应该很重要，因此，这本身就是一大因素。随着我们的继续，我们将讨论更多关于唯一性的原因。

类不唯一

• 您可以在多个元素上使用相同的类。
• 您可以在同一个元素上使用多个类。

需要应用于页面上多个对象的任何样式信息都应该使用类来完成。例如，一个页面有多个“小部件”。

<div class="widget"></div>
<div class="widget"></div>
<div class="widget"></div>

您现在可以使用类名“widget”作为您的钩子，将相同的样式集应用于它们中的每一个。但是，如果您需要其中一个比另一个更大，但仍然共享所有其他属性怎么办？类可以为您解决这个问题，因为您可以在其中应用多个类。

<div class="widget"></div>
<div class="widget big"></div>
<div class="widget"></div>

无需在此处创建全新的类名，只需在类属性中应用新的类即可。这些类是空格分隔的，大多数浏览器支持任意数量的类（实际上，它更像是数千个，但远远超过您需要的数量）。

任何 ID 或类都没有浏览器默认值

默认情况下，向元素添加类名或 ID 不会对该元素产生任何影响。

这正是我作为初学者被绊倒的地方。您在一个网站上工作，并发现应用特定类名可以解决您遇到的问题。然后，您跳到另一个具有相同问题的网站，并尝试使用相同的类名来修复它，以为该类名本身具有一些神奇的属性，但结果却发现它不起作用。

类和 ID 本身不包含任何样式信息。它们需要 CSS 来定位它们并应用样式。

条形码和序列号

也许这里的一个很好的类比是条形码和序列号。拿商店里的 iPod 来说。包装上会有一个条形码。这告诉商店产品是什么，因此当它被扫描时，系统就会确切地知道产品是什么以及它的价格。它甚至可能能够知道它的颜色或在商店中的存放位置。所有相同类型的 iPod 在它们上都具有完全相同的条形码。

iPod 上还会有一个序列号，它与世界上任何其他 iPod（或任何其他设备）绝对唯一。序列号不知道价格。它可以，但是对于商店来说，这并不是存储和使用该数据的有效方式。使用条形码要容易得多，例如，如果价格发生变化，您只需更改该条形码的价格，而无需更改系统中的每个单独序列号。

这非常类似于 ID 和类。可重用的信息应该保存在类中，而完全唯一的信息应该保存在 ID 中。

ID 具有特殊的浏览器功能

类在浏览器中没有任何特殊能力，但 ID 确实有一个非常重要的技巧。这就是 URL 中的“哈希值”。如果您有一个像 http://yourdomain.com#comments 这样的 URL，浏览器将尝试找到 ID 为“comments”的元素，并将自动滚动页面以显示该元素。这里需要特别注意的是，浏览器将滚动任何它需要滚动的元素以显示该元素，因此，如果您做了像在常规主体中使用可滚动 DIV 区域这样的特殊操作，该 div 也会被滚动。

这正是 ID 必须绝对唯一的重要原因。这样您的浏览器就知道在哪里滚动！

元素可以同时具有两者

没有什么可以阻止您在一个元素上同时拥有 ID 和类。实际上，这通常是一个非常好的主意。以 WordPress 评论列表项的默认标记为例

<li id="comment-27299" class="item">

它应用了一个类，您可能希望将其用于对页面上的所有评论进行样式化，但它也具有唯一的 ID 值（由 WordPress 动态生成，非常不错）。此 ID 值用于直接链接。现在我可以轻松地直接链接到特定页面上的特定评论。

CSS 不在乎

关于 CSS，您使用 ID 可以做到的，使用类也可以做到，反之亦然。我记得当我第一次学习 CSS 并遇到了问题时，有时我会尝试通过切换这些值来进行故障排除。不，CSS 不在乎。

JavaScript 在乎

JavaScript 人员可能已经更了解类和 ID 之间的区别。JavaScript 依赖于页面上只有一个元素具有任何特定的 id，否则常用的 getElementById 函数将不可靠。对于熟悉 jQuery 的人来说，您知道向页面元素添加和删除类是多么容易。它是 jQuery 的一个原生内置函数。请注意，ID 没有这样的函数。JavaScript 的责任不在于操作这些值，它会造成比它值得的更多问题。

如果您不需要它们，请不要使用它们

如您所见，类和 ID 非常重要，我们每天都依赖它们来完成我们需要的样式化和页面操作。但是，您应该谨慎且语义化地使用它们。

这意味着避免以下情况

<a href="https://css-tricks.org.cn" class="link">CSS-Tricks.com</a>

我们已经知道这个元素是一个链接，它是一个锚元素！这里没有必要使用类，因为我们可以通过它的标签来应用样式。

也要避免这种情况

<div id="right-col">

ID 在这里得到了适当的运用，因为页面可能只有一个右栏，但名称不合适。尝试描述元素的上下文，而不是它在哪里或是什么样子。这里将 ID 设置为“sidebar”会更合适。

微格式只是特定的类名

觉得微格式很难理解？其实不然！它们只是利用标准化类名来表示所包含信息的常规标记。查看标准 vCard

<div class="vcard">
  <a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
  <div class="adr">
    <span class="type">Work</span>:
    <div class="street-address">169 University Avenue</div>
    <span class="locality">Palo Alto</span>,  
    <abbr class="region" title="California">CA</abbr>  
    <span class="postal-code">94301</span>
    <div class="country-name">USA</div>
  </div>
  <div class="tel">
   <span class="type">Work</span> +1-650-289-4040
  </div>
  <div class="tel">
    <span class="type">Fax</span> +1-650-289-4041
  </div>
  <div>Email: 
   <span class="email">[email protected]</span>
  </div>
</div>