id和class在CSS中的区别以及何时使用它
<style> #main{ background: #000; border: 1px solid #AAAAAA; padding: 10px; color: #fff; width: 100px; } </style> <div id="main"> Welcome </div> 在这里，我给了div元素一个id ，它正在为它应用相关的CSS。
要么
<style> .main{ background: #000; border: 1px solid #AAAAAA; padding: 10px; color: #fff; width: 100px; } </style> <div class="main"> Welcome </div>
现在我在这里给了一个class ，也为我做了同样的工作。
那么id和class之间的确切区别是什么，什么时候应该使用id ，何时应该使用class 。 我是一个CSS和网页设计的新手，在处理这个时有点困惑。
欲了解更多信息， 请点击这里。
例
<div id="header_id" class="header_class">Text</div> #header_id {font-color:#fff} .header_class {font-color:#000}
（请注意，CSS使用前缀＃作为ID和。for类。）
然而， color是HTML5中不赞成使用的HTML 4.01 <font>标签属性。在CSS中没有“font-color”，样式是color所以上面应该是这样的：
例
<div id="header_id" class="header_class">Text</div> #header_id {color:#fff} .header_class {color:#000}
文本将是白色的。
-
如果要在整个页面/网站中一致地设置多个元素 ，请使用类 。 当你有或者将来可能有多于一个共享相同样式的元素时，类是有用的。 一个例子可能是一个“评论”的div或某种列表样式用于相关的链接。
此外，一个给定的元素可以有多个类关联，而一个元素只能有一个id。 例如，你可以给一个div两个类的样式都生效。
此外，请注意，类通常用于定义除了视觉样式之外的行为样式。 例如，jQuery表单验证程序插件大量使用类来定义元素的验证行为（例如，是否需要，或者定义输入格式的类型）
类名称的例子是：标签，注释，工具栏按钮，警告消息或电子邮件。
-
当页面上有一个元素将使用该ID时，将使用该ID 。 请记住，ID必须是唯一的。 在你的情况下，这可能是正确的选择，因为大概只会是页面上的一个“主”div。
ids的例子是：main-content，header，footer或left-sidebar。
记住这一点的一个好方法是一个类是一种类型的项目 ， id是页面上项目的唯一名称 。
id是唯一的
- 每个元素只能有一个
id - 每个页面只能有一个具有该
id元素
class es不是唯一的
- 您可以在多个元素上使用相同的
class。 - 你可以在同一个元素上使用多个
class。
Javascript关心
JavaScript人们已经可能更加喜欢class ES和id之间的差异。 JavaScript依赖于只有一个页面元素具有任何特定的id ，否则常用的getElementById函数不能被依赖。
ID必须是唯一的 – 在HTML文档中不能有多个具有相同ID的元素。 类可以用于多个元素。 在这种情况下，你会想要使用一个ID为“主”，因为它（可能是）唯一的 – 这是“主”div作为其他内容的容器，只有一个。
如果你有一堆菜单按钮或者你想要重复样式的其他元素，你可以将它们全部分配给同一个类，然后设置这个类的样式。
几乎所有人都说过使用ID作为一次性元素和类的多个使用元素。
这里是一个简单的例子，将HTML和HEAD标签视为已读
<body> <div id="leftCol"> You will only have one left column </div> <div id="mainContent"> Only one main content container, but..... <p class="prettyPara">You might want more than one pretty paragraph</p> <p>This one is boring and unstyled</p> <p class="prettyPara">See I told you, you might need another!</p> </div> <div class="footer"> Not very HTML5 but you'll likely only have one of these too. </div> </body>
另外，正如在其他答案中提到的ID很好地暴露给JavaScript，类更少。 然而，像jQuery这样的现代JavaScript框架也利用了JavaScript的类
class属性可以和多个HTML元素/标签一起使用，并且全部都会起作用。 在哪里作为一个单一的元素/标签是唯一的。
但是， id比class具有更高的特异性。
您可以将一个class分配给很多元素。 您也可以将多个class分配给一个元素，例如。
<button class="btn span4" ..>
在Bootstrap中。 您只能将id分配给一个。 所以，如果你想让许多元素看起来相同，例如。 列表项目，你选择class 。 如果你想使用JavaScript在元素上触发某些操作，你可能会使用id 。
一个类可以使用多次，而一个ID只能使用一次，所以你应该使用类，你知道你会用很多的项目。 例如，如果你想给你的网页上的所有段落相同的样式，你会使用类。
标准规定，任何给定的ID名称只能在页面或文档中引用一次。 每页只有一个事件时使用ID。 每页有一个或多个出现时使用类。
ID：
它将识别整个页面的独特元素。 没有其他元素应该使用相同的ID来声明。 id选择器用于指定单个唯一元素的样式。 id选择器使用HTML元素的id属性，并用“＃”定义。
类：
类选择器用于指定一组元素的样式。 与id选择器不同，类选择器通常用于多个元素。
这允许您为许多具有相同类的HTML元素设置特定的样式。
类选择器使用HTML类属性，并用“。”定义。
这很容易理解：
当我们必须将CSS属性仅应用于一个属性时使用id。
当我们必须在同一个页面或不同的地方使用CSS属性的时候才使用class。
一般： – 像独特的结构，像凝视div和按钮布局，我们使用id。
对于整个页面或项目中的相同的CSS，我们使用类
身份证轻，班级稍重
一个简单的方法来看它是一个ID是唯一的一个元素。
一个类不是唯一的，适用于多个元素。
例如：
<p class = "content">This is some random <strong id="veryImportant"> stuff!</strong></p>
内容是一个类，因为它可能适用于其他一些标签，以及“非常重要”只被使用一次而不再使用。
ID的功能可以作为网页中特定部分的链接。 ＃标签后面的关键字将带您到网页的特定部分。 例如地址栏中的“ http：//exampleurl.com#chapter5 ”将会带你到达那里，当你有一个“section5”的ID包裹在页面的第5章节。
如果有什么可以添加到以前的好答案，这是解释为什么id必须每页独一无二。 这对于初学者来说是很重要的，因为将相同的id应用到同一个页面中的多个元素将不会引发任何错误，而是与class具有相同的效果。
所以从HTML / CSS的角度来看，每页id的唯一性并没有什么意义。 但是从JavaScript的角度来看，每个页面每个元素都有一个id是非常重要的，因为getElementById()顾名思义就是通过id元素。
所以，即使你是一个纯粹的HTML / CSS开发者，你也必须尊重每页id的唯一性，原因有两个：
- 清晰度：每当你看到一个ID，你确定它不存在于同一页面的其他地方
- 可伸缩性 ：即使您只是使用HTML / CSS进行开发，您也需要考虑您或其他开发人员将继续使用JavaScript维护和添加功能到您的网站的那一天。
与id选择器不同， class选择器通常用于多个元素。
这允许您为许多具有相同类的HTML元素设置特定的样式。
class选择器使用HTML类属性，并用“。”定义。
一个简单的方法来看它是一个ID是唯一的一个元素。 class更好地使用，因为它会帮助你执行任何你想要的。
id选择器可以用于更多的元素。 这里是例子：
CSS：
#t_color{ color: red; } #f_style{ font-family: arial; font-size: 20px; }
HTML：
<p id="t_color"> test only </p> <div id="t_color">the box text</div>
我在Internet Explorer（版本11.0）和Chrome（版本47.0）上测试过。 它适用于他们两个。
“唯一”只意味着一个元素不能有多个id属性，如类选择器。 也不
<p id="t_color f_style">...</p>
也不
<p id="t_color" id="f_style">...</p>
