id和class之间有什么区别？

Posted 2021-04-02

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

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

答案

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选择器。

另一答案

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

应该使用类来应用CSS。

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

另一答案

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

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

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

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

另一答案

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

另一答案

在高级开发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语言继承的。

另一答案

1）div id不可重用，只应该应用于html的一个元素，而div类可以添加到多个元素。

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

3）样式元素总是通过放置一个div来引用div类。 （点）在他们的名字前面，而div id类是通过在他们的名字前放一个＃（哈希）来引用的。

4）示例： -

在<style>宣言中的课程 - .red-background { background-color: red; }

在<style>宣言中的身份证 - #blue-background {background-color: blue;}

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

另一答案

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

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

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

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

在通过学校内部通信系统提供规则时，您可以向一个班级提供规则：

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

.Biology {
  color: red;
}

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

“Jonathan Sampson明天要穿绿色衬衫。”

#JonathanSampson {
  color: green;
}

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

更具体的选择者获胜。

另一答案

在哪里使用ID与班级

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

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

另一答案

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

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

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

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

然后页脚可能会进入带有id的div

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

还有一堂课

另一答案

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

你应该参考W3C standards，如果你想成为一个严格的顺从者，或者如果你希望你的页面符合标准validated。

另一答案

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

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

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

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

在过去的岁月中，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说实例，班级说课。

另一答案

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