Question

关于CSS，<div class="">和<div id="">之间有什么区别？是否可以使用<div id="">？

我看到不同的开发者在这两方面做到了这一点，因为我自学成才，我从来没有真正弄明白。

Answer 1

ids必须是唯一的，因为class可以应用于很多事情。在CSS中，id看起来像#elementID和class元素看起来像.someClass

一般情况下，只要您想引用特定元素，就使用id;当您有许多相似的内容时，请class使用id。例如，常见的header元素就像footer，sidebar，class。常见的highlight元素包括external-link或id。

阅读级联并理解分配给各种选择器的优先级是个好主意：http://www.w3.org/TR/CSS2/cascade.html

然而，您应该了解的最基本的优先级是class选择器优先于<p id="intro" class="foo">Hello!</p>选择器。如果你有这个：

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

和

id

文本为红色，因为class选择器优先于{{1}}选择器。

Answer 2

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

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

学生 ID 卡片截然不同。校园内没有两名学生拥有相同的学生 ID 卡。但是，许多学生可以并且将至少分享一个 Class 。

将多名学生置于一个 Class 标题下是可以的，例如Biology。但是，将多名学生置于一名学生 ID 之下是绝对不可接受的。

在学校内部通信系统上提供规则时，您可以将规则提供给类：

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

.Biology {
  color: red;
}

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

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

#JonathanSampson {
  color: green;
}

在这种情况下，Jonathan Sampson正在接收两个命令：一个是生物学课程的学生，另一个是直接要求。因为Jonathan直接通过id属性被告知要穿绿色衬衫，他会忽视早先穿红色衬衫的要求。

更具体的选择者获胜。

Answer 3

何处使用ID与班级

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

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

Answer 4

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

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

有时候，使用ID是个好主意。

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

然后页脚可能会进入id为

的div

＆lt; div id =“footer”class =“...”＆gt;

并且还有一个班级

Answer 5

CLASS 应该用于您想要相同样式的多个元素。 ID 应该是唯一元素。请参阅此tutorial。

如果您想成为严格的遵守者，或者您希望自己的网页符合W3C standards标准，则应参考validated。

Answer 6

ID是唯一的。课程不是。元素也可以有多个类。还可以动态地添加类并将其移除到元素中。

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

惯例似乎是对每个页面上的页面元素使用ID（比如“navbar”或“menu”）和其他所有类的类，但这只是惯例，你会发现使用范围很大。 / p>

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

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

Answer 7

CSS是面向对象的。 ID说实例，班级说课。

Answer 8

类类似于类别。许多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 9

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 10

应用CSS时，将其应用于类并尝试尽可能避免使用id。该ID只应在JavaScript中用于获取元素或用于任何事件绑定。

应该使用类来应用CSS。

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

Answer 11

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

一个类用于引用某种类型的显示，例如，您可能有一个div的css类，它代表了这个问题的答案。因为会有很多答案，所以多个div需要相同的样式，你可以使用一个类。

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

从技术上讲，您可以使用所有类的类，或者逻辑地拆分它们。但是，您不能将id重用于多个元素。

Answer 12

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

Answer 13

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

出于可重复的目的，类可以与 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> 元素，但我们可以应用box和bg-color-red两个班级。

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

Answer 14

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>   这里的背景是蓝色的

Answer 15

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

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

id指定元素的唯一ID

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

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

Answer 16

类用于具有共同属性的多个元素。例如，如果您希望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>

我们生成输出

Output

Answer 17

在CSS中，类选择器是一个以句号（“。”）开头的名称，而ID选择器是以一个井号（“＃”）开头的名称。 ID和类之间的区别在于，ID可用于标识一个元素，而类可用于标识多个元素。

id和class之间有什么区别？

17 个答案:

何处使用ID与班级