ID与Class区别，有的新手对此非常迷茫，不知道什么时候该用id，什么时候该用class。这两个选择器让新手左右为难。
一、在web标准中是不容许重复ID的，例如 div id="a" 不容许重复2次；而class所定义的是类，理论上可以无限重复。以根据需要多次引用。
二、属性的优先级问题：ID 的优先级要高于class，我们在下面的代码中有示例说明。
三、方便JS等客户端脚本的引用，如果在页面中要对某个对象进行脚本操作，那么可以给他定义一个ID，否则只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个ID来得简单与快捷。
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta. http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>52css.com</title>
<style. type="text/css">
<!--
#YourHomePage {
color:red
}
.YourHomePage {
color:blue
}
-->
</style>
</head>
<body>
<div id="YourHomePage" class="YourHomePage">
52css.com - Div+CSS XHTML XML 教程大全 <br />
52css.com - Div+CSS XHTML XML 教程大全
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------
class是设置标签的类。
id是设置标签的标识。
class属性用于指定元素属于何种样式的类。
如样式表可以加入：
.baobao { color: lime; background: #ff80c0 }
使用方法：class="baobao"
id属性用于定义一个元素的独特的样式。如一个CSS规则：
#binbin { font-size: larger }
使用方法：id="binbin"
id是一个标签，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆；
class是一个样式，可以套在任何结构和内容上，就象一件衣服；
概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本：一个Class可以定义剧本中每个人物的故事 线，你可以通过CSS，javas
至于 ID，通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时（比如说通常一个页面都是由一个页眉，一个报头< masthead>，一个内容区域和一个页脚等组成），一般使用ID比较理想，因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中 很少会出现大于一次的情况。
归纳成一句话就是：Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题，但在标准上这绝对是错误的使用，而且很可能导致某些浏览器的现实问题。
在实际应用的时候，Class可能对文字的排版等比较有用，而ID则对宏观布局和设计放置各种元素较有用。
-----------------------------------------------------------------------------------------------------------------------------------
按照字面的意思，id是指一个元素在整个文档中的“唯一标志”，而class则是它所属的“类别”。按照语法，同名的id在一个文档里只应该出现一次，而class名可重复使用。
但是在具体使用的时候，哪些样式该用id，哪些样式改用class呢？有个答案很简单：
那些只会在页面中出现一次的元素应该用id来表示。比如页头（header） 页尾（footer），导航菜单（main-menu）等。但是真的这么简单么？
我先举几个例子来说明我所遇到的尴尬：
大多数的页面都是两栏布局的：一个主栏（main column），一个侧栏（side column）。就像这样：
OK，我们会用两个div来表示它们。问题来了，应该使用id还是class？按照常规的理解，一个页面只会有一个主栏，一个侧栏咯，所以当然应该用id。文档写成这：
<div id="main-col"></div>
<div id="side-col"></div>
#main-col { float: left; width: 700px;}
#side-col { float: right; width: 200px; }
也是很赏心悦目的，不是么？所以我决定用id。
于是页面做好了，网站做好了，上线了，运营了，访问量大了。这时候公司决定，嗯，我们应该在一些页面中加几个通栏广告。“通栏”哦！这就意味着它必须横跨主栏和侧栏，把它们俩拦腰截断。于是我们重新“发明”一个样式：banner，让banner来一个clear:both; 然后放到页面中间去阻止掉两个栏的浮动。然后再在banner的后面继续分两栏。下面是示意图：
所以HTML应该是这样：
<div id="main-col"></div>
<div id="side-col"></div>
<div class="banner></div>
<div id="main-col"></div>
<div id="side-col"></div>
问题轻松解决（多亏偶经验丰富啊，表扬一下自己，咔咔。）。唯独只有一个问题：main-col和side-col这两个id重复了。这个问题其实也不麻烦，把它们全部改成class不就好啦（甚至，不去改它，我就不信浏览器会给我报错，哼）。
1,但是，我这不是自己给了自己一个嘴巴么？当初还信誓旦旦的说，main-col只会出现一次，所以用id……。所以教训就是，main-col和side-col，或是left-col, right-col ,extra-col, xxx-col，这些用来分栏布局的样式，都给我用class。嗯，记在本本上。
2,设计页面的时候，在页头和主菜单之间放了一个搜索框（search-box）。既然我们的页头（header），导航栏（main-menu），登录框（login-box）都用的是id，和它们在一起的search-box也应该用id咯？呃，小心啊，老板很可能会让你在页尾也放一个搜索框的，你用id你就死定了。所以search-box应该用class。不过这样怪怪的，凭什么login-box用id，而search-box却用class呢？
3,慢着，你以为导航栏就可以保证唯一了么？我来讲一个例子：
喏，老板要来一点不同的，让把导航栏放在左侧。这个没问题，用一个ul就搞定拉。我把它的id设置成main-menu但是过了一会儿，他说，嗯，为了可用性（咳咳。。），我们需要把菜单分成两部分。就像：
评论