id和class有什么区别？

<div class="">和<div id="">CSS 的区别是什么？可以使用<div id="">吗？

我看到不同的开发人员都以两种方式执行此操作，并且由于我是自学成才的，所以我从来没有真正想过。

ids必须是唯一的，class才能应用于许多事物。在CSS中，id外观#elementID和class元素外观.someClass

通常，id在您要引用特定元素时，以及class在有许多相似的事物时，请使用。举例来说，常见的id元素之类的东西header，footer，sidebar。常见class元素是highlight或external-link。

最好学习级联并了解分配给各个选择器的优先级：http : //www.w3.org/TR/CSS2/cascade.html

但是，您应该了解的最基本的优先级是id选择器优先于class选择器。如果您有这个：

<p id="intro" class="foo">Hello!</p>

和：

#intro { color: red }
.foo { color: blue }

该文本将为红色，因为id选择器优先于class选择器。

也许类推将有助于理解差异：

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

学生ID卡是不同的。没有两个学生在校园里都会有相同的学生ID卡。但是，许多学生可以并且将彼此共享至少一个班级。

可以将多个学生置于一个班级标题下，例如生物学。但是，将多个学生放在一个学生证下绝对是不可接受的。

当给出的规则在学校对讲系统，你可以给规则一个类：

“明天，所有学生都要穿一件红色的衬衫参加生物课。”

.Biology {
  color: red;
}

或者，您可以通过调用特定学生的唯一ID为其指定规则：

“乔纳森·桑普森（Jonathan Sampson）明天要穿绿色衬衫。”

#JonathanSampson {
  color: green;
}

在这种情况下，乔纳森·桑普森（Jonathan Sampson）收到两个命令：一个是生物学班的学生，另一个是直接要求。由于乔纳森通过id属性直接被告知要穿绿色衬衫，因此他将无视先前要求穿红色衬衫的要求。

更具体的选择器获胜。

在哪里使用ID与类

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

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

ID在整个页面中必须唯一。

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

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

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

然后，页脚可能会进入具有ID的div中

<div id =“ footer” class =“ ...”>

还有一堂课

一类应该用于您想为同一样式的多个元素。的ID应该是一个唯一的元件。请参阅本教程。

如果您想成为严格的遵循者，或者希望您的网页经过验证符合标准，则应参考W3C标准。

ID是唯一的。类不是。元素也可以具有多个类。同样，可以动态地将类添加和删除到元素。

在任何可以使用ID的地方，都可以使用类。反之则不成立。

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

另一个不同之处是，对于表单输入元素，该<label>元素按ID引用一个字段，因此如果要使用，则需要使用ID <label>。是一个可访问性的东西，您确实应该使用它。

在过去的几年中，ID也是首选，因为它们可以通过Javascript（getElementById）轻松访问。随着jQuery和其他Javascript框架的出现，这几乎已经不再是问题了。

类就像类别。许多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类实现，但是该部分仍继承#content .section的通用样式。

当我进行JavaScript或CSS开发时，通常会使用ID来访问/操作非常特定的HTML元素，并且使用类来访问/将样式应用于各种元素。

CSS是面向对象的。ID表示实例，class表示类。

应用CSS时，请将其应用于类，并尽量避免对id进行操作。该ID仅应在JavaScript中用于获取元素或用于任何事件绑定。

应该使用类来应用CSS。

有时您必须使用类进行事件绑定。在这种情况下，请尽量避免用于应用CSS的类，而应添加没有相应CSS的新类。当您需要更改任何类的CSS或同时更改任何元素的CSS类名称时，这将为您提供帮助。

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往往会胜出。这是另一个主题。

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

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

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

从技术上讲，您可以为所有类使用类，或者在逻辑上将它们拆分。但是，您不能对多个元素重复使用ID。

类用于将您的样式应用于一组元素。ID样式仅适用于具有该ID的元素（只能为一个）。通常，您使用类，但是如果一次性使用，则可以使用ID（或将样式直接粘贴到元素中）。

在高级开发ID中，我们基本上可以使用JavaScript。

出于可重复的目的，类 es与应该唯一的id相反是很方便的。

以下是说明上述表达式的示例：

<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>元素，但是我们可以将boxand bg-color-red类应用于这两个元素。

这个概念是在OOP语言中的继承。

1）div ID不可重用，并且只能应用于HTML的一个元素，而div类可以添加到多个元素。

2）如果id都应用于相同的元素并且具有冲突的样式，则id更为重要，则将应用id的样式。

3）样式元素始终通过放置div来引用div类。div id类是通过在名称前面加上＃（哈希）来引用的。

4）范例：-

<style>声明类-.red-background { background-color: red; }

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

<div class="red-background" id="blue-background">Hello</div> 这里的背景将是蓝色的

id并且class是两个Global / Standard HTML属性（下面的global属性可以在任何HTML元素上使用。）

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

id 指定元素的唯一ID

id属性为元素提供了文档范围内的唯一标识符，其中class属性提供了对相似元素进行分类的方式。

id属性值在HTML页面上必须是唯一的，在该页面上可以在要应用相同属性的任何地方重复使用class属性

类用于具有共同属性的多个元素。例如，如果要为p和body标签使用相同的颜色和字体，请使用类属性或在分隔符中使用。

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

应该注意的是，如果我们在一个元素中同时使用class和id，则* id会遍历类的属性。*仅仅因为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>

我们生成输出

输出量