也许一个类比可以帮助理解差异：

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

学生 证 各不相同。校园内不会有两名学生拥有相同的学生 证 彼此 共享至少一个 课程

可以将多个学生归入一个 班级 名称下，例如生物学。但绝不可以将多个学生归入一个学生 ID .

通过学校对讲系统 制定 规则 向 班级 规则 ：

“明天，所有学生都要穿红色衬衫去上生物课。”

.Biology {
  color: red;
}

或者，您可以通过调用特定学生的唯一 ID ：

“乔纳森·桑普森明天将穿一件绿色衬衫。”

#JonathanSampson {
  color: green;
}

在这种情况下，Jonathan Sampson 收到两个命令：一个是作为生物课学生收到的命令，另一个是直接要求。由于 Jonathan 是通过 id 属性直接被告知要穿绿色衬衫的，因此他将忽略先前要求他穿红色衬衫的请求。

更具体的选择器将获胜。

@LucM 为什么不呢？

@LucM 我误解了你的观点 - 非常正确，id 必须是唯一的，但你可以这样做

何时使用 ID 而不是类

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

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

一个id在整个页面内必须是唯一的。

一个类可以适用于许多元素。

有时，使用 id 是一个好主意。

在一个页面中，通常有一个页脚、一个页眉...

那么页脚可能位于带有 id 的 div 中

还有课

ID 是唯一的。类不是。元素也可以有多个类。还可以动态地向元素添加和删除类。

任何可以使用 ID 的地方都可以改用类。反之则不然。

惯例似乎是对每个页面上的页面元素使用 ID（例如 \'navbar\' 或 \'menu\'），而对其他所有内容使用类，但这只是惯例，您会发现用法有很大差异。

另一个区别是，对于表单输入元素，元素 <label> 通过 ID 引用字段，因此如果您要使用，则需要使用 ID <label> 。是一种可访问性，您确实应该使用它。

在过去，ID 也是首选，因为它们在 Javascript 中很容易访问（getElementById）。随着 jQuery 和其他 Javascript 框架的出现，这现在几乎不再是问题。

应该用于您想要相同样式的多个元素。用于 CLASS 应该 ID 唯一元素。请参阅本 教程 .

如果您想成为严格的遵守者，或者希望您的页面符合 标准 ， 您应该参考 W3C 标准

类类似于类别。许多 HTML 元素可以属于一个类，并且一个 HTML 元素可以有多个类。类用于应用通用样式或可应用于多个 HTML 元素的样式。

ID 是标识符。它们是唯一的；不允许其他人拥有相同的 ID。ID 用于将独特的样式应用于 HTML 元素。

我以这样的方式使用 ID 和类：

<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>

在此示例中，标题和内容部分可通过 #header 和 #content 进行样式设置。内容的每个部分都可通过 #content .section 应用通用样式。为了好玩，我为中间部分添加了 \'special\' 类。假设您希望某个特定部分具有特殊样式。这可通过 .special 类实现，但该部分仍从 #content .section 继承通用样式。

当我进行 JavaScript 或 CSS 开发时，我通常使用 ID 来访问/操作非常具体的 HTML 元素，并且使用类来访问/将样式应用于广泛的元素。

应用 CSS 时，请将其应用于类，并尽量避免使用 ID。ID 应仅用于 JavaScript 中获取元素或用于任何事件绑定。

应该使用类来应用 CSS。

有时您确实必须使用类来进行事件绑定。在这种情况下，请尽量避免使用用于应用 CSS 的类，而是添加没有对应 CSS 的新类。当您需要更改任何类的 CSS 或更改任何元素的 CSS 类名时，这将有所帮助。

Twitter Bootstrap 使用了这一原则 - 即根本不使用 ID（v3.3）。这是一个更极端的例子，因为他们需要他们的库尽可能通用。它确实展示了只使用类的好处 - 那就是你可以用更少的更改将它应用于更多网站

CSS 选择器空间实际上允许条件 id 样式：

h1#my-id {color:red}
p#my-id {color:blue}

将按预期呈现。为什么要这样做？有时 ID 是动态生成的，等等。进一步的用途是根据高级 ID 分配以不同方式呈现标题：

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

就我个人而言，我更喜欢更长的类名选择器：

body#list-page .title-block > h1 {font-size:56px}

因为我发现使用嵌套 ID 来区分处理有点不合理。只要知道，随着 Sass / SCSS 世界中的开发人员掌握了这些东西，嵌套 ID 就会成为常态。

最后，当谈到选择器性能和优先级时，ID 往往会胜出。这是另一个话题。

任何元素都可以有一个类或一个 ID。

类用于引用特定类型的显示，例如，您可能有一个用于表示此问题答案的 div 的 css 类。由于会有很多答案，多个 div 需要相同的样式，因此您将使用一个类。

一个 id 仅引用单个元素，例如右侧的相关部分可能具有特定于它自己的样式，而不会在其他地方重复使用，因此它将使用 id。

从技术上讲，您可以为所有元素使用类，也可以按逻辑将它们分开。但是，您不能为多个元素重复使用 ID。

类用于将样式应用于一组元素。ID 样式仅适用于具有该 ID 的元素（应该只有一个）。通常使用类，但如果是一次性元素，则可以使用 ID（或将样式直接粘贴到元素中）。

在高级开发中 我们基本上可以使用JavaScript 。

对于可重复的目的， 应该是唯一的 相比， id class

下面是一个示例，说明上述表达式：

<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>

现在您可以看到这里 box 和 box1 是两个（2）不同的 <div> 和 box 类应用于它们两个。 bg-color-red

这个概念是 OOP 语言中的继承。