id 和 class 有什么区别？

Question

<div class=""> 和 <div id=""> 在 CSS 方面有什么区别？用<div id="">可以吗？

我看到不同的开发人员在这两种方式中都这样做，而且由于我是自学成才的，所以我从来没有真正弄清楚。

Answer 1

ids 必须是唯一的，因为class 可以应用于许多事情。在 CSS 中，ids 看起来像 #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 选择器。

Answer 2

也许一个类比将有助于理解差异：

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

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

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

当通过学校对讲系统给出Rules时，您可以将Rules分配给Class：

“明天，所有学生都要穿红衬衫上生物课。”

.Biology {
  color: red;
}

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

“乔纳森·桑普森明天要穿一件绿色衬衫。”

#JonathanSampson {
  color: green;
}

在这种情况下，Jonathan Sampson 收到两条命令：一条是生物课的学生，另一条是直接要求。因为 id 属性直接告诉乔纳森穿绿色衬衫，所以他会忽略之前的穿红色衬衫的请求。

更具体的选择器获胜。

Answer 3

在哪里使用 ID 与类

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

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

Answer 4

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

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

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

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

那么页脚可能会进入一个带有id的div

还有一门课

Answer 5

ID 是唯一的。上课不是。元素也可以有多个类。类也可以动态添加和删除到元素中。

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

惯例似乎是对每个页面上的页面元素（如“导航栏”或“菜单”）使用 ID，并为其他所有内容使用类，但这只是惯例，您会发现用法差异很大。

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

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

Answer 6

CLASS 应该用于需要相同样式的多个元素。 ID 应该用于唯一元素。看到这个tutorial。

如果您想成为一个严格的墨守成规者，或者如果您希望您的网页符合标准的validated，您应该参考W3C standards。

Answer 7

类就像类别。许多 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 元素，并使用类来访问/应用样式到广泛的元素。

Answer 8

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

Answer 9

在应用 CSS 时，将其应用到一个类上，并尽量避免应用到一个 id 上。 ID 只能在 JavaScript 中用于获取元素或用于任何事件绑定。

应该使用类来应用 CSS。

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

Answer 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 往往胜出。这是一个完全不同的主题。

Answer 11

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

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

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

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

Answer 12

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

Answer 13

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

为了可重复的目的，classes 很方便，而 ids 应该是唯一的。

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

<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 语言中的继承。

Answer 14

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

2) 一个 id 更重要，如果两者都应用于同一个元素并且具有冲突的样式，则将应用 id 的样式。

3) 样式元素总是通过放置一个 . （点）在他们的名字前面，而 ​​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> 这里的背景将是蓝色的

Answer 15

id和class是两个Global / Standard HTML attribute（下面的全局属性可以用在任何HTML元素上。）

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

id为一个元素指定一个唯一的id

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

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

Answer 16

Class 用于具有共同属性的多个元素。例如，如果您希望 p 和 body 标签使用相同的颜色和字体，请使用 class 属性或在一个部门本身中。

另一方面，

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>

我们生成输出

Output

Answer 17

在 CSS 中，类选择器是一个以句点 (“.”) 开头的名称，而 ID 选择器是一个以井号 (“#”) 开头的名称。 ID和类的区别在于ID可以用来标识一个元素，而一个类可以用来标识多个元素。