<div id="stockexchange-id" class="stockexchange-class">Text</div>
在上面的示例中，我在 div 语句中添加了一个类和一个 id。它们之间有区别吗？如果我调用 .stockexchange-class CSS 而不是 #stockexchange-id CSS 会有什么不同吗？如果没有，那么同时拥有它们有什么意义？还有哪个更好用？
【问题讨论】：
最大的区别是一个文档可以有多个具有相同类的元素，但不能具有相同的 ID。标识符必须特定于文档中的某个元素（即完整的 HTML 页面）。
在应用 CSS 样式时，一些专家建议使用类而不是 ID，以避免特殊性之争。 CSS Lint (http://csslint.net/) 推荐这个。
原因是样式表是从上到下读取的，但 ID 优先于类。这意味着：
#stockexchange-id {
color: blue;
}
.stockexchange-class {
color: red;
}
将文本着色为蓝色，即使红色稍后出现。这是一个很好的图形解释特异性：https://stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg。
如果所有内容都具有相同的特性，并且大多数样式都是通过单个类应用的，那么 CSS 会更容易推理，因为它会从上到下读取，而不会以不同的顺序混合额外的样式。它还可以更轻松地覆盖类，这很有用。
最后，如果您基于类进行样式设置，您可以通过将类应用到页面上的另一个元素来重复使用同一页面上的样式。使用 ID，因为它们是唯一的，所以您不能这样做。即使您认为页面上的元素是唯一的（例如购买按钮），情况也可能并非总是如此。设计师可以稍后在页面中再次请求相同的元素。
【讨论】：
您只能在任何 XHTML 或 HTML 文档中使用一次 ID 名称。重复的 ID 标签会导致您的页面验证失败，并且在将 JavaScript 与它们一起使用时可能会产生负面影响。简单地说，ID 就像商场目录上写着“你在这里”的贴纸，而且永远只能是其中一个。
类和 ID 一样，也可以在 JavaScript 脚本中使用，但与 ID 不同的是，它们可以在同一个 HTML 文档中多次使用。这种内容与表示的分离使得由 CSS 提供支持的网站更加健壮，但有些人不知道他们可以在多大程度上使用类。
【讨论】：