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

本文已盖 106 层楼

  1. 博主你好 你的博文都很精彩 刚才已经订阅了你的博客 你的一些技巧对我很有帮助 这几天我也自己动手制作了一个wp主题 P.s:纯原创 现在正在你这里收集JQ的技巧 希望能和你成为朋友

  2. 回复 itlobo 说:

    一个可重复,一个不可重复

  3. 我来坐第100层楼 :mrgreen:

  4. 回复 无名 说:

    嘿嘿……这篇文章写的不错,有时间好好的细细研究一下,CSS里很多的问题我都看不懂呢,等有时间得向博主好好请教一番呢!呵呵……

  5. 回复 willin 说:

    這篇不錯! 很多人受益! 其中怎麼選: "id 是唯一, class 是共用." 記這句就行.

  6. 回复 Amo 说:

    很受用,做友情链接不?

  7. 不懂CSS要改造WP的皮肤真难,头疼不已。

  8. 回复 江流 说:

    错字了。。。。。一窍不通=。=

  9. 回复 江流 说:

    反正我对css一起熬不动,记得视频教程第一课就说这两个鬼东西的区别

  10. 回复 泡面 说:

    对初学者很有帮助。

  11. 回复 evlos 说:

    杯具,实际上小邪花了很长时间才分清楚 #是id .是class ~ :arrow:

  12. 回复 超人 说:

    万戈是个当老师的好材料!!

  13. 这些标准有时还需要有影响力的人来普及一下!

  14. 回复 漠天 说:

    今天算明白了,以前只是去用,没有注意这些东西。

  15. 回复 Youwei 说:

    万戈能否做个友情链接?

  16. 回复 Youwei 说:

    w3cschool上我记得介绍也不错

  17. 回复 胡余丰 说:

    太好了,我正在学习css
    这篇文章对帮助好大呀

  18. \ 萬戈又在普及科普呢 、

  19. 回复 站长助 说:

    我也是刚找了一个css3.0的下下来看

  20. 回复 itlobo 说:

    学习了,一般ID只是使用头部,内容,底部等...其他全部用class

  21. 回复 Justice 说:

    其实很简单,无复用就用id,有复用就用class。

  22. 就像老婆和情人一样。。

  23. 回复 countmeon 说:

    额 以前研究过一段时间,现在都忘的差不多了。

  24. 回复 A.shun 说:

    我自己貌似没有加过ID

  25. 回复 huangjun 说:

    id具有唯一性吧

  26. 回复 阿吴 说:

    一般都是class了

  27. 回复 rollom 说:

    看来你现在在学习css啊。

  28. 回复 HzlzH 说:

    一般能class的我尽量class 在折腾的的选择 :shock:

  29. 回复 小雯子 说:

    多写点高级用法,比如ie6重影怎么去掉 :???:

  30. 回复 clayboy 说:

    哈哈..前两天刚看的..再学一次...

  31. 回复 happyet 说:

    同样也是介绍class和id,我怎么就说不出这样的水平捏。。。。 :arrow:

  32. 哈哈。。。学习了,有的细节还真没注意到。。。 :roll:

  33. 回复 猴子 说:

    学习+复习。
    老万多发点这类的东西,挺不错的。 :roll:

  34. 回复 CT 说:

    学习了,之前没注意到id对W3C标准的影响

  35. 回复 Joe 说:

    :eek: 面试的时候面试官就问了我这个问题

  36. 回复 rusaer 说:

    ID适合用于有action的div。class适用于大众定义

  37. 回复 星网 说:

    一下这么多评论!有沙发也不给我开后门~! :cry:

  38. 回复 619 说:

    嗯,这篇文章对我有帮助。
    这两天我也在学CSS哩,刚开始自学简单的布局,一会让你检查检查我的作业哈 :lol:

  39. 回复 卢松松 说:

    我基本是如火纯情了

  40. 回复 王盼盼 说:

    原来这就是生活。很有特色的生活。

  41. 回复 bolo 说:

    其实没什么区别的,只需要记住同一个页面里ID只能是唯一的,而class可以出现很多次

  42. 回复 zwwooooo 说:

    折腾主题就要认真考虑了,不过我经常在修改中就忘了,当然重复用ID这个低级错误不会,只是我喜欢用class——指小地方。

  43. 這兩個我總是搞混。。。

  44. 貌似HTML可以有多个相同ID标记(所以不是唯一的),但是在JavaScript中,一个ID只能赋予一次!
    编写CSS代码时,良好的习惯是一个ID最最多只能赋予一个HTML标记!
    还有个区别:ID不支持像class那样的多风格同时使用....
    我的些小小观点!

  45. 回复 蓝冰 说:

    咳咳·!我还没混淆 :twisted: ~!

  46. 今天我来得很早 :lol:

  47. 回复 秦大少 说:

    坐个沙发再慢慢看

Leave a comment

您已输入0

三言两语

我的生活心情语录

工作手札

路漫漫其修远兮

精品推荐

好东西要分享

嘻哈娱乐

八卦趣事一笑而过

电脑网络

全新技术尽搜罗

转来载去

文人墨客美文赏析