CSS 中 ID 与 Class 的区别及使用方法

对于 CSS 初学者来说，ID 和 Class 的区别是个十分值得探讨和注意的话题。接下来，我就对 ID 和 Class 的区别及适用场合做简单的阐述。

孪生兄弟：ID 和 Class

很多刚迈入网页设计师行业的人对 CSS 中 ID 和 Class 的认识还停留在比较混乱的阶段。很多人甚至认为这两兄弟功能上是完全一样的，这就导致了他们对 ID 和 Class 的滥用。

ID 以及它的适用场合

ID 是唯一标识（identification）的意思；这是一个非常优雅和漂亮的 CSS 属性。但同时我们又很容易将它应用在错误的场合。与每个人的身份证号码必须唯一一样的道理，ID 在一个 XHTML 和 HTML 文档中的使用次数也必须唯一，即 ID 不能重复使用。重复使用 ID 标签不仅会导致你的页面无法通过 W3C 验证，而且会对 JavaScript 操作 DOM 造成负面影响。总之，ID 就像页面某个元素的身份证一样（如<div id="test"></div>），它最多仅能出现一次。

主流浏览器能够识别 HTML 和 XHTML 文档中的 ID 属性。假设我们希望在网页顶部做一个链接；当我们点击这个链接时，页面会自动滚动下滑到正文区域去；此时我们可以在正文外围元素或正文的标题元素上添加一个id="title"的属性/值，然后在链接上添加如下锚代码：

<a  href= "#title" > Life Studio </a>
<div  id= "title" > 万戈-Life Studio-http://wange.im </a>

在 CSS 文档代码中，我们可以通过符号"#"来选择我们自定义的 ID 属性。

同时，JavaScript 也非常依赖 HTML 和 XHTML 中的 ID 属性，其中最重要的过程函数莫过于 getElementById() 。

Class 以及它的适用场合

与 ID 类似，Class 也可以被 JavaScript 代码所操控；但与 ID 不同的是，在同一 HTML 文档中，我们可以多次使用 Class。CSS 能够让内容与表现相分离的这种特性就得益与 Class 的强大。很多初学者知道我们能够多次将同一 Class 属性定义在不同的 HTML 元素标签上；但他们或许不知道，我们还可以将多个 Class 属性定义在同一 HTML 标签上：

.left  {
float :  left;
}
.larger p  {
font - size :  125 %;
}
< div class = "left larger" >
<p > Life Studio </p >
</ div >

第二段代码是一个完美的可通过 W3C 验证的 HTML 代码；它将两个不同的 Class 属性定义在同一 DIV 上，实现让一个段落<p>在向左浮动的同时，将其字体大小设置成文档默认字体的125%倍。

可以想象，这种组合使用 Class 的技术能够减小 CSS 文件大小并提高代码使用效率。

同样值得注意的是，我们也可以将 ID 和 Class 同时定义在某个 HTML 元素上！

那么 ID 与 Class 相比较，我该选择使用哪个？

这是一个初学网页设计的人经常面对的问题，而事实也证明是这样。很多 CSS 编写者将 ID 的用法与 Class 的用法相混淆，这导致他们在同一 HTML 页面上多次使用同一 ID 属性。

虽然这种用法或许并不影响页面的外观（浏览器能正常解析），但却给页面的规范性和日后的网页维护留下了隐患。说它不规范是因为它没有遵循 W3C 推荐的 CSS 使用规范，这样的代码无法通过 W3C 认证，而且不能保证以后的浏览器能够正常的进行解析。说它给日后的网页维护留下隐患是因为正如我们上面所谈到的，Class 的大量使用一方面能够减少 CSS 文件大小，进而加快网页速度；另一方面通过 Class 的组合使用提高 CSS 编程效率，这主要是因为 Class 能够重复使用，无需像 ID 那样，增加一个 ID，必需在对应的 CSS 代码中增加对属性的定义。

结合上面的描述，我推荐给大家如下的规范作为 CSS 的“游戏规则”：尽可能多的使用 Class 定义网页的样式；仅在与 JavaScript 操作相关的 HTML 元素上使用 ID 属性。

Tips：当我们看到一个 ID 时，会意识到有 JavaScript 可能在操作这个元素（方便 JS 代码查错）。

总结

无论怎样，是选择 ID 还是选择 Class？这一切都取决于你。希望本文对大家认识 ID 和 Class 有一定的帮助作用。

本文转自：http://www.docin.com/p-8097684.html