浅谈CSS中ID与CLASS的区别与用法

我们在用DIV+CSS制作网页时，常会用到class和id来选择调用CSS样式属性。对学习CSS的新手来说class和id可能比较模糊，同时不知道什么时候该用class，什么时候用id，以及它们用法与限制是怎么样的。

首先来看最显而易见的区别：

[HTML] 纯文本查看 复制代码

部分代码略：
<style type="text/css">div {...}
#imid {...} 
.imclass {...} 
</style>

<div id="imid"></div> 
<div class="imclass"></div> 

我们可以看到id是以“#”开头，而class是以“.”开头。没有前缀直接开头的是HTML元素。class的主要功能，是用来对对象的样式进行设置，id除了可以定义样式之外，还可以成为网站交互（如javascript）行为一个特使标识。


id属性，只能被一个元素调用（以“#”选择符命名CSS样式在一个页面只能使用调用一次）
class类标记，在同一个页面可以被多个元素调用，且可以调用无数次(以“.”选择符命名样式可以一个页面使用多次)


id就像一个人的身份证，用于识别这个div的，class就像人身上穿的衣服，用于定义这个div的样式。通常网页不设两个及以上同id的div，但class可以多个div用同一个class。为了便于新手理解，夏穆在这里把代码换成中文表示：

[HTML] 纯文本查看 复制代码

部分代码略：
<style type="text/css">
#i1 {黑色背景} 
#i2 {白色背景} 
.c1 {长方形尺寸} 
.c2 {正方形尺寸}
.c3 {实线边框}
.c4 {虚线边框}
</style>
<!--***SUMMUR***-->
<div id="id1" class="c1 c3">这个是黑色背景，实线边框的长方形</div> 
<div id="id2" class="c2 c3">这个是白色背景，实线边框的正方形</div> 
<div class="c1 c4">这个是虚线边框的长方形。由于只有两个ID，而ID又不能重复使用，因此这个块没有设置背景色。</div>

另外值得注意的是，在表现形式上 id 的优先级比class高，如果id和class都定义了背景颜色的属性，那么最终背景颜色将以id中的设置为准。如有疑问和错误，欢迎交流及批评指正。