1062人阅读
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 ，你的浏览器将会试图去定位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是非常重要的，我们每天都依赖与他们去操作风格和页面执行我们所需要的。然而我们应当明确和语义的使用他们。
这个的意思是避免这样的事情：
href="" class="link"&&
我们已经知道这个元素是一个链接，它有一个锚点的元素！没有特殊的需要使用class。通过它的标签我们已经提供了风格。
避免这个：
&div id="right-col"&
ID适当的使用作为一个页面将类似于一个单独的列，但名称不合适。试图描述元素的上下文不在这里或者。一个ID
微格式只是特殊的类名
想象中微格式在你的head以上？他们不在那里。他们仅是标注使用标准的类名里面所包含的信息。导出一个标准的名片：
class="vcard"&
class="fn org url" href="merce.net/"&CommerceNet&
class="adr"&
class="type"&Work&:
class="street-address"&169 University Avenue&
class="locality"&Palo Alto&,
class="region" title="California"&CA&
class="postal-code"&94301&
class="country-name"&USA&
class="tel"&
class="type"&Work& +1-650-289-4040
class="tel"&
class="type"&Fax& +1-650-289-4041
class="email"&&
文章出处：
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：66228次
积分：1248
积分：1248
排名：千里之外
原创：38篇
译文：20篇
评论：31条
(7)(4)(2)(3)(5)(10)(1)(2)(7)(12)(3)(3)天极传媒：天极网全国分站
您现在的位置：
& &&认清CSS的类class和标识id选择符
认清CSS的类class和标识id选择符天极网 13:57
　　认清CSS的类class和标识id选择符
　　在CSS初级教程中我们仅仅考虑了HTML选择符──以HTML标签形式出现。你当然可以用类选择符class和标识选择符id来定义自己的选择符。这样做的好处是，依赖于class或者id，你可以不同地表现相同的HTML元素。
　　在CSS中，类选择符在一个半角英文句点(.)之前，而id则在半角英文井号(#)之前。
　　看起来像这样:
　　#top { background-color: # padding: 1em }
　　.intro { color: font-weight: }
　　HTML与CSS的连接用属性id和class。像这样:
以下是引用片段：#top&{&background-color:&#&padding:&1em&}& //id.intro&{&color:&&font-weight:&&}//class
　　应用如下：
以下是引用片段：&div&id="top"&& &h1&Chocolate&curry&/h1& &p&class="intro"&网页陶吧-最好的网站建设教程站&/p&& &p&class="intro"&&/p&& &/div&
　　id和class不同之处在于，id用在唯一的元素上，而class则用在不止一个的元素上。
　　你也可以为一个指定的HTML元素应用选择符，把HTML选择符放置在前面就可以了，所以， p.jam { whatever }会应用在有类“jam”的段落上。　　&&阅读关于
的全部文章
（作者：龙犊整理责任编辑：龙犊）
天极新媒体&最酷科技资讯扫码赢大奖
* 网友发言均非本站立场，本站不在评论栏推荐任何网店、经销商，谨防上当受骗！
Win10系统在Win8的基础上对界面、特性以及跨平台方面做了诸多优化。
手机整机DIY企业级3726人阅读
首先，在表现形式上 ID 的优先级比css高，例如：
#id {background-color:Red}
.class {background-color:blue}
&div id=&id& class=&class&&
id和class都定义了背景颜色的属性，但是由于id的优先级比class高，所以背景色为id所定义的红色
再次，class是通用属性，就是说几个div可以调用同一个class ，而ID是唯一的，web标准中不允许出现两个div的id标识是相同的，id也是js获取对象的一个标识，所以也必须是唯一的，（就像如果一个房子里面如果有两个相同名字的人，我要这个名字的人去做某事，谁去呢？就会混乱）
class还有个好处就是，一个div可以调用几个css，如
#id {background-color:gray}
.class1 {color:}
.class2 {width:200height:100px}
&div id=&id& class=&class1 class2&&
class1控制文本颜色为红色，class2控制div的大小
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：616344次
积分：4842
积分：4842
排名：第5750名
原创：60篇
转载：92篇
评论：16条
(1)(1)(7)(9)(2)(1)(1)(6)(1)(1)(5)(6)(1)(1)(2)(1)(1)(1)(2)(2)(1)(3)(1)(10)(3)(1)(5)(6)(1)(3)(1)(1)(1)(3)(1)(1)(2)(2)(1)(5)(1)(5)(3)(7)(1)(3)(5)(1)(6)(2)(5)(1)(1)(7)