id 和 class 有什么区别？-class-IT问答社区-解决你的IT疑问

id 和 class 有什么区别？

Porcupine Andrew 2月前

105 0

有什么区别

和

说到 CSS？可以使用

我看到不同的开发人员用这两种方式来做这件事，而且...

和 <div class=""> 有 <div id=""> 什么区别 <div id=""> ？

我看到不同的开发人员用这两种方式来做这件事，而且由于我是自学的，所以我从来没有真正弄明白。

帖子版权声明 1、本帖标题：id 和 class 有什么区别？
本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Porcupine Andrew在本站《class》版块原创发布，转载请注明出处！

最新回复 (0)

最新倒序只看楼主

Peti Juhász 2月前 0 只看Ta

引用 2楼

这不会提供任何新信息。回答时，尤其是回答一个老问题时，在添加新答案之前，务必通读所有现有答案，以确保您没有重复已经说过的内容。
Abacus 2月前 0 只看Ta

引用 3楼

在 CSS 中，类选择器是一个以句号（“.”）开头的名称，而 ID 选择器是一个以井号（“#”）开头的名称。ID 和类之间的区别在于，ID 可用于标识一个元素，而类可用于标识多个元素。
Tang0 2月前 0 只看Ta

引用 4楼
类用于具有共同属性的多个元素。例如，如果您希望 p 和 body 标签具有相同的颜色和字体，则可以使用类属性或在部门本身中使用。

另一方面，Id 用于突出显示单个元素属性，并且仅专用于特定元素。例如，我们有一个 h1 标签，它带有一些属性，我们不希望它们在整个页面的任何其他元素中重复出现。

需要注意的是，如果我们在一个元素中同时使用 class 和 id，*id 会覆盖 class 属性。*因为 id 只适用于单个元素

参考以下示例
```
<html>
<head>
<style>
    #html_id{
        color:aqua;
        background-color: black;

    }
    .html_class{
        color:burlywood;
        background-color: brown;
    }
</style>

   </head>
    <body>
<p  class="html_class">Lorem ipsum dolor sit amet consectetur adipisicing 
   elit. 
    Perspiciatis a dicta qui unde veritatis cupiditate ullam quibusdam! 
     Mollitia enim, 
    nulla totam deserunt ex nihil quod, eaque, sed facilis quos iste.</p>
    </body>
   </html>
```
我们生成输出

输出
Shami Asad 2月前 0 只看Ta

引用 5楼

id 和 class 是两个全局/标准 HTML 属性（下面的全局属性可用于任何 HTML 元素。）

class 为元素指定一个或多个类名（指样式表中的类）

id 为元素指定唯一的 id

id 属性为元素提供了文档范围的唯一标识符，而 class 属性则提供了一种对相似元素进行分类的方法。

id 属性值在整个 HTML 页面中必须是唯一的，而 class 属性可以在任何想要应用相同属性的地方重复使用
Istiaque Ahmed 2月前 0 只看Ta

引用 6楼

1) div id 不可重复使用，只能应用于 HTML 的一个元素，而 div 类可以添加到多个元素。

2）如果两个id重要性较大，且同时应用于同一个元素，且样式有冲突，则以id重要的样式为准。

3) 样式元素总是通过在其名称前面放置 .（点）来引用 div 类，而 div id 类则通过在其名称前面放置 #（井号）来引用。

4）示例：-

中的类 <style> - .red-background { background-color: red; }

中的 ID <style> - #blue-background {background-color: blue;}

<div class="red-background" id="blue-background">Hello</div> 这里的背景颜色为蓝色
Matthew McCullough 2月前 0 只看Ta

引用 7楼
在高级开发中 我们基本上可以使用JavaScript 。

对于可重复的目的， 应该是唯一的 相比， id class

下面是一个示例，说明上述表达式：
```
<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>
```
现在您可以看到这里 box 和 box1 是两个（2）不同的 <div> 和 box 类应用于它们两个。 bg-color-red

这个概念是 OOP 语言中的继承。
neopheus 2月前 0 只看Ta

引用 8楼

类用于将样式应用于一组元素。ID 样式仅适用于具有该 ID 的元素（应该只有一个）。通常使用类，但如果是一次性元素，则可以使用 ID（或将样式直接粘贴到元素中）。
Dylan Nicholson 2月前 0 只看Ta

引用 9楼

任何元素都可以有一个类或一个 ID。

类用于引用特定类型的显示，例如，您可能有一个用于表示此问题答案的 div 的 css 类。由于会有很多答案，多个 div 需要相同的样式，因此您将使用一个类。

一个 id 仅引用单个元素，例如右侧的相关部分可能具有特定于它自己的样式，而不会在其他地方重复使用，因此它将使用 id。

从技术上讲，您可以为所有元素使用类，也可以按逻辑将它们分开。但是，您不能为多个元素重复使用 ID。
Hendrik 2月前 0 只看Ta

引用 10楼
CSS 选择器空间实际上允许条件 id 样式：
```
h1#my-id {color:red}
p#my-id {color:blue}
```
将按预期呈现。为什么要这样做？有时 ID 是动态生成的，等等。进一步的用途是根据高级 ID 分配以不同方式呈现标题：
```
body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}
```
就我个人而言，我更喜欢更长的类名选择器：
```
body#list-page .title-block > h1 {font-size:56px}
```
因为我发现使用嵌套 ID 来区分处理有点不合理。只要知道，随着 Sass / SCSS 世界中的开发人员掌握了这些东西，嵌套 ID 就会成为常态。

最后，当谈到选择器性能和优先级时，ID 往往会胜出。这是另一个话题。
Iron Man 2月前 0 只看Ta

引用 11楼

Twitter Bootstrap 使用了这一原则 - 即根本不使用 ID（v3.3）。这是一个更极端的例子，因为他们需要他们的库尽可能通用。它确实展示了只使用类的好处 - 那就是你可以用更少的更改将它应用于更多网站
import random 2月前 0 只看Ta

引用 12楼

应用 CSS 时，请将其应用于类，并尽量避免使用 ID。ID 应仅用于 JavaScript 中获取元素或用于任何事件绑定。

应该使用类来应用 CSS。

有时您确实必须使用类来进行事件绑定。在这种情况下，请尽量避免使用用于应用 CSS 的类，而是添加没有对应 CSS 的新类。当您需要更改任何类的 CSS 或更改任何元素的 CSS 类名时，这将有所帮助。
Christopher Thoms 2月前 0 只看Ta

引用 13楼
类类似于类别。许多 HTML 元素可以属于一个类，并且一个 HTML 元素可以有多个类。类用于应用通用样式或可应用于多个 HTML 元素的样式。

ID 是标识符。它们是唯一的；不允许其他人拥有相同的 ID。ID 用于将独特的样式应用于 HTML 元素。

我以这样的方式使用 ID 和类：
```
<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>
```
在此示例中，标题和内容部分可通过 #header 和 #content 进行样式设置。内容的每个部分都可通过 #content .section 应用通用样式。为了好玩，我为中间部分添加了 \'special\' 类。假设您希望某个特定部分具有特殊样式。这可通过 .special 类实现，但该部分仍从 #content .section 继承通用样式。

当我进行 JavaScript 或 CSS 开发时，我通常使用 ID 来访问/操作非常具体的 HTML 元素，并且使用类来访问/将样式应用于广泛的元素。
asudeekz 2月前 0 只看Ta

引用 14楼

应该用于您想要相同样式的多个元素。用于 CLASS 应该 ID 唯一元素。请参阅本教程 .

如果您想成为严格的遵守者，或者希望您的页面符合标准，您应该参考 W3C 标准
Sofia Hjärtberg Zintio 2月前 0 只看Ta

引用 15楼

ID 是唯一的。类不是。元素也可以有多个类。还可以动态地向元素添加和删除类。

任何可以使用 ID 的地方都可以改用类。反之则不然。

惯例似乎是对每个页面上的页面元素使用 ID（例如 \'navbar\' 或 \'menu\'），而对其他所有内容使用类，但这只是惯例，您会发现用法有很大差异。

另一个区别是，对于表单输入元素，元素 <label> 通过 ID 引用字段，因此如果您要使用，则需要使用 ID <label> 。是一种可访问性，您确实应该使用它。

在过去，ID 也是首选，因为它们在 Javascript 中很容易访问（getElementById）。随着 jQuery 和其他 Javascript 框架的出现，这现在几乎不再是问题。
Prasad 2月前 0 只看Ta

引用 16楼

一个id在整个页面内必须是唯一的。

一个类可以适用于许多元素。

有时，使用 id 是一个好主意。

在一个页面中，通常有一个页脚、一个页眉...

那么页脚可能位于带有 id 的 div 中

还有课
Aditya Sinha 2月前 0 只看Ta

引用 17楼

何时使用 ID 而不是类

两者之间的简单区别在于，虽然类可以在页面上重复使用，但 ID 只能在每个页面上使用一次。因此，在标记页面上主要内容的 div 元素上使用 ID 是合适的，因为只有一个主要内容部分。相反，您必须使用类来设置表格上的交替行颜色，因为根据定义，它们将被多次使用。

ID 是一种非常强大的工具。具有 ID 的元素可以成为 JavaScript 的目标，该 JavaScript 可以以某种方式操纵元素或其内容。ID 属性可以用作内部链接的目标，用名称属性替换锚标记。最后，如果您使 ID 清晰且合乎逻辑，它们可以作为文档中的一种“自我文档”。例如，如果块的开始标记具有 ID，例如 \'main\'、\'header\'、\'footer\' 等，则您不一定需要在块之前添加注释来说明代码块将包含主要内容。
D Stanley 2月前 0 只看Ta

引用 18楼

@LucM 我误解了你的观点 - 非常正确，id 必须是唯一的，但你可以这样做
Assou Iben jellal 2月前 0 只看Ta

引用 19楼

@LucM 为什么不呢？

is perfectly valid
Mario Ishac 2月前 0 只看Ta

引用 20楼
也许一个类比可以帮助理解差异：
```
<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />
```
学生证各不相同。校园内不会有两名学生拥有相同的学生证彼此 共享至少一个 课程

可以将多个学生归入一个班级名称下，例如生物学。但绝不可以将多个学生归入一个学生 ID .

通过学校对讲系统制定规则向班级规则：

“明天，所有学生都要穿红色衬衫去上生物课。”
```
.Biology {
  color: red;
}
```
或者，您可以通过调用特定学生的唯一 ID ：

“乔纳森·桑普森明天将穿一件绿色衬衫。”
```
#JonathanSampson {
  color: green;
}
```
在这种情况下，Jonathan Sampson 收到两个命令：一个是作为生物课学生收到的命令，另一个是直接要求。由于 Jonathan 是通过 id 属性直接被告知要穿绿色衬衫的，因此他将忽略先前要求他穿红色衬衫的请求。

更具体的选择器将获胜。