id和class之间的区别

Question

<div id="stockexchange-id" class="stockexchange-class">Text</div>

在上面的例子中，我在div语句中添加了一个类和一个id。它们之间有区别吗？如果我调用.stockexchange-class CSS而不是#stockexchange-id CSS会有什么不同吗？如果没有，那么拥有它们的重点是什么？还有哪一个会更好用？

Answer 1

最大的区别是文档可以包含多个具有相同类的元素，但不具有相同的ID。标识符必须特定于文档中的某个元素（即完整的HTML页面）。

在应用CSS样式时，一些专家建议使用ID而不是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，因为它们是唯一的，所以你不能这样做。即使您认为某个元素在页面上是唯一的（例如购买按钮），但情况可能并非总是如此。设计人员可以稍后在页面中再次请求相同的元素。

Answer 2

您只能在任何XHTML或HTML文档中使用ID名称。重复的ID标记会导致您的页面验证失败，并且在使用JavaScript时会产生负面影响。简而言之，ID就像贴在商城目录上的“你在这里”，并且只能有其中一个。

类似ID的类也可用于JavaScript脚本，但与ID不同，它们可以在同一HTML文档中多次使用。内容与表示的分离使得CSS支持的网站更加健壮，但有些人不知道他们可以使用类的完整程度。