css中class和id之间有什么区别？

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

 

ID和class都是“钩子”

我们需要一个使用html/xhtml语言描述文档内容的方式，类似的基础元素有<h1>,<p>和<url>来完成这样的工作，但我们的基础标签不能覆盖网页元素和布局选择中的所有类型。因此我们需要ID和class。

例如

<ul id="nav">

这将明确的给我们针对这个无序列表的机会，我们可以操作它到页面中唯一的另一个无序列表中。

或者在我们的网页中有一个段落并且没有相关的标签去标注它，例如页脚（footer），这里我们可以这样做

<div id="footer">

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

<div>

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

 

ID是唯一的

• 每个元素仅可以有一个ID

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

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

 

类不是唯一的

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

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

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

<div></div>
<div></div>
<div></div>

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

<div></div>
<div></div>
<div></div>

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

 

css中id和class的区别

1、语法区别：

id对应css是用样式选择符“#”（井号）。

class对应css是用样式选择符“.”(英文半角输入句号)。

2、使用次数区别：

class可以在页面里面重复使用，

id由于在页面里面只能出现一次，所以不能重复使用，

所以尽量用class来写，这样能在页面里面重复引用你写的css，减小工作量和代码量。

 

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

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

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

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

 

条形码和序列号

在商店购买一个ipod，包装上有一个条形码，设备有唯一的序列号。

商店并不以有效的方式存储和使用序列号数据，使用条形码确实很简单的事情，如果价格发生变动，你可以修改条形码的价格，不会修改每个独立的序列号。

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

 

ID具有特殊的浏览器功能

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

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

 

元素可以两个都有

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

<li id="comment-27299">

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

https://www.houdianzi.com/ vi设计公司

CSS关不关心

关于css，在这里你用ID或类什么也做不了，有时候试着切换围绕在他们周围的数值来解决问题，不，css并不关心。

 

JavaScript关心的

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

 

如果不需要，就不要去用

类和id非常重要，使用时应明确语义，避免下面的情况：

<a href="http://css-tricks.com">css-tricks.com</a>

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

避免这个：

<div id="right-col">

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