css – id和class之间的区别

<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;
}

如果所有内容都具有相同的特异性,并且大多数样式都是通过单个类应用的,那么它会使CSS更易于推理,因为它将从上到下阅读,而不会在不同的顺序中混合使用额外的样式.它还可以更轻松地覆盖类,这可能很有用.

最后,如果您基于类进行样式,则可以通过将类应用于页面上的另一个元素来在同一页面上重新使用样式.使用ID,因为它们是唯一的,所以你不能这样做.即使您认为某个元素在页面上是唯一的(例如购买按钮),但情况并非总是如此.设计者可以稍后在页面中再次请求相同的元素.

相关文章