id和类的区别是什么?

当涉及到CSS时，<div class="">和<div id="">之间有什么区别?是否可以使用<div id="">?

我看到不同的开发人员用这两种方式来做这件事，因为我是自学的，所以我从来没有真正弄清楚。

当前回答

id必须是唯一的，因为类可以应用于很多东西。在CSS中，id看起来像#elementID，类元素看起来像.someClass

一般来说，当您有许多相似的东西时，当您想引用特定的元素和类时，请使用id。例如，常见的id元素包括页眉、页脚、边栏。常见的类元素是highlight或external-link。

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

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

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

and:

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

文本会是红色的，因为id选择器优先于类选择器。

2009-02-12 23:38:15

其他回答

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

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

3) Style元素总是引用div类。(点)在他们的名字前面，而div id类是通过在他们的名字前面放一个#(哈希)来引用的。

4)举例:-

2018-06-22 07:16:19

或许打个比方有助于理解其中的区别:

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

学生证是不同的。校园里不允许两个学生使用相同的学生证。然而，许多学生可以并且愿意与其他同学共享至少一个班级。

把多个学生放在一个班级标题下是可以的，比如生物。但把多个学生放在一个学号下是不可接受的。

当通过学校对讲系统发布规则时，你可以向一个班级发布规则:

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

.Biology {
  color: red;
}

或者你可以给一个特定的学生规则，通过调用他的唯一ID:

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

#JonathanSampson {
  color: green;
}

在这种情况下，乔纳森·桑普森收到了两个命令:一个是生物课上的学生，另一个是直接要求。因为通过id属性直接告诉Jonathan穿绿色衬衫，所以他将忽略先前穿红色衬衫的请求。

更具体的选择器获胜。

2009-02-13 22:46:00

类用于具有公共属性的多个元素。例如，如果你想让p和body标签的颜色和字体相同，使用class属性或在一个除法本身。

另一方面，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>

我们生成输出

输出

2020-02-27 15:39:59

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

2020-08-07 22:25:58