当我们在使用CSS的时候ID与Class有何不同？

ID和Class之间有何不同

ID和Class都是“钩子”

我们需要一个使用HTML/XHTML语言描述文档内容的方式，类似的基础元素有

<h1>

,

<p>

和

<ul>

来完成这样的工作，但我们的基础标签不能覆盖网页元素和布局选择中的所有的类型。因此我们需要ID和Class。例如：

<ul id="nav">

这将明确的给我们针对这个无序列表的机会，我们可以操作它到页面中唯一的另一个无序列表中。或者在我们的网页中有一个段落并且没有相关的标签去标注它，例如页脚（footer），这里我们可以这样做：

<div id="footer">

。或许我们有一些盒子（box）在我们的侧边栏中，为了保持内容分离的方式有：

<div class="sidebar-box">

。



这些ID和Class的钩子需要我们进行标注获并执行他们。CSS显然需要我们建立选择并做我们的风格，但一些类似JavaScript的网页语言也依赖他们。但他们之间的不同是什么呢？

ID是唯一的

每个元素仅可以有一个ID

每个页面仅可以有一个元素拥有这个ID

当我第一次学习这些知识的时候，我反复的听到你应当仅使用ID一次，但你可以反复的使用Class。基本从我的左耳朵进右耳多出了，因为它听起来更像是一个好的“经验规则”，对我来说并不是及其重要。如果你编写纯粹的HTML/CSS，这些属性你可以坚持，他们看起来并没有什么不同。

这里：如果你不止一次的使用相同的ID你的代码将不能通过验证。验证对我们所有人来说很重要….。

类不是唯一的

你可以在多个元素中使用相同的类

你可以使用多个类在一个元素中

很多类型信息需要应用到页面中的多个对象中，这些都需要class实现。例如页面多次使用“widgets”：



现在你可以使用名为“widget”的类作为你的钩子，对每一个地方去实行相同的类型设置。但如果需要他们中的一个变得更大，还能享有其他的属性？类可以覆盖这些，你也可以实行更多的类：



不需要去修改新类的名字，仅需要在新类中正确的填入属性。这里类属性通过空格进行分隔已经被大多数浏览器所支持。

ID和Class对于浏览器没有默认设置

为一个元素添加一个ID或者类并不会做任何默认的事情。

当我作为一个初学者的时候，这东西阻碍过我。你在一个网站工作断定使用一个特定的类名称解决了一个你现有的问题。然后又跳到另一个网站也碰到了相同的问题，并且使用相同的类名称来解决这个问题，想象这类名有这一些神奇的属性，所以才发现它不工作。

Class和ID他们自身没有任何风格信息。他们需要CSS作为他们的目标实现风格的显示。

条形码和序列号

或许这个可以很好的比喻条形码和序列号，在商店里购买一个iPod。在包装上会有一个条形码。当条形码被扫描的时候它会告诉商店它是什么商品。系统会知道一些产品的额外信息和价格。或许可以知道颜色和商店里所摆放的位置。所有相同型号的iPod都有相同的条形码。

iPod都会有一个与其他iPod设备绝对唯一的序列号。序列号并不知道价格。通过序列号也是可以知道价格的，但对于商店并不以有效的方式存储和使用这些数据。使用条形码却是很简单的事情，举一个例子，如果价格发生了变动，你可以修改条形码的价格，并不会修改每个独立的序列号。

上述非常像ID和类。可重复使用的信息应该保存着类里面，总体唯一的信息需要保存在ID里面。

ID具有特殊的浏览器功能

类在浏览器中并没有特殊的属性，但ID确实有一个非常重要的标注它们自己的袖子。这个就是URL中的“hash value”。如果你有一个类似的URL http://yourdomain.com#comments，你的浏览器将会试图去定位ID叫做“comments”的元素，并且会自动滚动页面显示这个元素。注意这里很重要，浏览器将滚动任何元素，就是为了显示它需要显示的元素，所以如果你做一些特别类似于在你在body内部有一个滚动的DIV区域这样的事情，这个div也将被滚动。

这就是为什么ID必须绝对唯一的重要原因。这样你的浏览器就知道那里可以滚动。

元素可以两个都有

这里没有什么可以阻止你将ID和类放入一个单独的元素中。事实上它通常是一个好注意。例如默认为一个WordPress标注评论列表项：



它有一个类用于你想要的所有提交在页面上的风格，但它还有一个唯一的ID值（被WordPress动态生成的，恰到好处）。这个ID值用于直接链接。现在我能直接链接到一个页面上的特定提交。

CSS并不关心

关于CSS，在这里你用ID什么也做不了，使用类也什么也做不了。我记得当我第一次学习CSS并且还怀有一个问题，有些时候我试着切换围绕在他们周围的数值来解决问题。不！CSS并不关心。

Javascript关心的

JavaScript或许更多的工作是协调不同的类和ID之间的关系。JavaScript依赖于每个页面中的特定元素，否则通常使用的getElementById函数是不可靠的。对于熟悉jQuery的人来说都知道用它添加、删除页面元素中的类是多么的简单。jQuery是本地并内嵌的函数。ID中不存在这样额函数。JavaScript不负责去操纵这些值，相对于引发更多的问题来说这是值得的。

如果你不需要他们，就不要去使用他们

正如同我们所见，类和ID是非常重要的，我们每天都依赖与他们去操作风格和页面执行我们所需要的。然而我们应当明确和语义的使用他们。

这个的意思是避免这样的事情：

<a href="http://css-tricks.com" class="link">CSS-Tricks.com</a>

我们已经知道这个元素是一个链接，它有一个锚点的元素！没有特殊的需要使用class。通过它的标签我们已经提供了风格。

避免这个：

<div id="right-col">

ID适当的使用作为一个页面将类似于一个单独的列，但名称不合适。试图描述元素的上下文不在这里或者。一个ID

微格式只是特殊的类名

想象中微格式在你的head以上？他们不在那里。他们仅是标注使用标准的类名里面所包含的信息。导出一个标准的名片：

<div class="vcard">
<a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
<div class="adr">
<span class="type">Work</span>:
<div class="street-address">169 University Avenue</div>
<span class="locality">Palo Alto</span>,
<abbr class="region" title="California">CA</abbr>
<span class="postal-code">94301</span>
<div class="country-name">USA</div>
</div>
<div class="tel">
<span class="type">Work</span> +1-650-289-4040
</div>
<div class="tel">
<span class="type">Fax</span> +1-650-289-4041
</div>
<div>Email:
<span class="email">info@commerce.net</span>
</div>
</div>

文章出处：https://css-tricks.com/the-difference-between-id-and-class/