何时使用类选择器以及何时使用 ID 选择器 [重复]答案

【问题标题】：when to use Class selector and when to use ID selector [duplicate]何时使用类选择器以及何时使用 ID 选择器 [重复]
【发布时间】：2011-09-22 05:04:55
【问题描述】：

可能重复：
CSS: div id VS. div class

我是 CSS 新手，有一个普遍的问题：您如何决定使用类选择器还是 id 选择器更好？

【问题讨论】：

这个问题已经被问过 很多次 次了。提问前请先搜索。 stackoverflow.com/search?q=css+id+vs+class

标签： css

【解决方案1】：

这个页面上的答案都很好，但是从更务实的角度来处理差异。让我试着从另一个角度给你解释一下。您在定义页面的概念实体时使用的 id，例如某物的列表、页脚或导航菜单。您通常只有一个的东西，因为另一个没有意义或将是另一种类型的实体。当您有重复实体的模式或用于相同目的的元素时，您倾向于为它们分配一个类，请考虑部分标题、画廊中的照片等。因此，前面提到的列表中的项目都将被分配相同的类姓名。但请注意，仅出于样式原因，您可以只使用类，永远不要使用单个 id，并且非常好。您的课程是只使用一次还是多次使用都没有关系。

【讨论】：

【解决方案2】：

当您只有一个需要样式的项目时，最好使用 id。例如：

<div id = 'myDiv>Text</div>

#myDiv
{
   display: block;
}

但是，当您有多个想要以相同方式设置样式的项目时（例如在具有 css 文件的多个页面上），使用类会更快（更好）

<div class = "MyDiv> text </div>
<div class = "MyDiv> more text</div>

.MyDiv
{
   color: black;
}

【讨论】：

【解决方案3】：

ID 应该用于单个元素：

<table id="specialtable">

类应该用于多个元素：

<h3 class="awesomeheader"> <!-- an awesome header -->
<h2 class="awesomeheader"> <!-- another awesome header -->

【讨论】：

【解决方案4】：

id 唯一标识一个元素，因此当您只有一个元素时使用它（例如...

该类应用于一组具有相同特征的元素。

最佳实践说 id 在整个 html 页面中是唯一的

【讨论】：

【解决方案5】：

Id 必须是唯一的，class 不是。因此，这取决于您要如何划分页面。

【讨论】：

【解决方案6】：

根据 W3C 标准，一个 id 在一个页面上只能使用一次，而一个类可以多次使用。

来自http://www.w3schools.com/tags/att_standard_id.asp的“ID”定义

id 属性为 HTML 元素指定一个唯一的 id。

id 在 HTML 文档中必须是唯一的。

id 属性可由 JavaScript（通过 HTML DOM）或
通过 CSS 对具有指定 id 的元素进行更改或设置样式。

来自http://www.w3schools.com/tags/att_standard_class.asp的“类”定义：

class 属性指定元素的类名。

class 属性主要用于指向样式表中的类。
但是，JavaScript 也可以使用它（通过 HTML DOM）进行更改
到具有指定类的 HTML 元素。

由于 id 在页面上应该是唯一的，因此通过 javascript 也可以更快地访问它

【讨论】：