今天有点闲，想向大家请教一下id和class的使用。
按照字面的意思，id是指一个元素在整个文档中的“唯一标志〞，而class那么是它所属的“类别〞。按照语法，同名的id在一个文档里只应该出现一次，而class名可重复使用。
但是在详细使用的时候，哪些款式该用id，哪些款式改用class呢？有个答案很简单：那些只会在页面中出现一次的元素应该用id来表示。比方页头〔header〕页尾〔footer〕，导航菜单〔main-menu〕等。但是真的这么简单么？
我先举几个例子来说明我所遇到的为难：
1.大多数的页面都是两栏布局的：一个主栏〔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的后面继续分两栏。下面是示意图：
用div与css实现网页布局代码所以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呢？
慢着，你以为导航栏就可以保证唯一了么？我来讲一个例子：
喏，老板要来一点不同的，让把导航栏放在左侧。这个没问题，用一个ul就搞定拉。我把它的id设置成main-menu但是过了一会儿，他说，嗯，为了可用性〔咳咳。。〕，我们需要把菜单分成两部分。就像：
呃。。好说，分成两个ul就好了。但是，它们的id都叫main-menu么？？哎，老问题又来了。
3.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。