id 和 class 有啥区别?

Posted

技术标签:

【中文标题】id 和 class 有啥区别?【英文标题】:What's the difference between an id and a class?id 和 class 有什么区别? 【发布时间】:2010-10-07 08:07:39 【问题描述】:

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

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

【问题讨论】:

【参考方案1】:

ids 必须是唯一的,因为class 可以应用于许多事情。在 CSS 中,ids 看起来像 #elementIDclass 元素看起来像 .someClass

一般来说,当你想引用一个特定的元素时使用id,当你有许多相似的东西时使用class。例如,常见的id 元素类似于headerfootersidebar。常见的class 元素类似于highlightexternal-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 选择器。

【讨论】:

对于那些关心的人来说,#intro 优先的原因是因为某种称为特异性的东西:w3.org/TR/CSS2/cascade.html#specificity TBH,没有人再使用 id 了,除非它与 javascript 集成有关(当你需要一个唯一值时)。它是 html 剩余的,你不需要仅仅因为它存在就使用它。说你只有一个标题,所以你需要 id 而不是 class 可能是正确的。但是,假设您有一个带有样式属性的搜索栏。如果您想稍后在页面末尾添加另一个具有相同属性的搜索栏,则不能,因为 id 只能使用一次。老实说,我只是看不到 id 的任何用途。它不会使您的代码更有条理或任何东西。 只是把这两件事混淆了很长时间。现在我明白了“id”应该用唯一元素来引用,而“class”可以根据它们的区别应用于多个元素或事物 我更喜欢以这种方式查看 ID:如果您有许多相似的元素(例如 &lt;li&gt;in 和 &lt;ul&gt;)并且您希望有一个 single其中一个表现不同(CSS或JS无关紧要),然后你使用id属性。 ID 是标识符,CLASS 是样式规则列表,它们的存在目的不同【参考方案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 属性直接告诉乔纳森穿绿色衬衫,所以他会忽略之前的穿红色衬衫的请求。

更具体的选择器获胜。

【讨论】:

可能会造成混淆。你不能在同一页面上&lt;student id="JonathanSampson" class="Physics" /&gt; @LucM 为什么不呢? &lt;div id="SomeId" class="SomeClass"&gt;&lt;/div&gt; 完全有效 @Basic id 在页面上必须是唯一的。你不能有&lt;student id="JonathanSampson" class="Biology" /&gt;&lt;student id="JonathanSampson" class="Physics" /&gt; @LucM 我误解了你的意思 - 非常正确,id 必须是唯一的,但你可以这样做 &lt;student id="JonathanSampson" class="Biology Physics" /&gt;【参考方案3】:

在哪里使用 ID 与类

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

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

【讨论】:

【参考方案4】:

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

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

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

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

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

还有一门课

【讨论】:

【参考方案5】:

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

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

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

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

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

【讨论】:

【参考方案6】:

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

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

【讨论】:

【参考方案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 元素,并使用类来访问/应用样式到广泛的元素。

【讨论】:

【参考方案8】:

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

【讨论】:

【参考方案9】:

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

应该使用类来应用 CSS。

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

【讨论】:

Twitter Bootstrap 使用这个原则——即根本没有使用任何 ID (v3.3)。这是一个更极端的例子,因为他们需要他们的库尽可能通用。它确实显示了只使用类的好处——那就是您可以在更多的网站上应用它而只需更少的更改【参考方案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 往往胜出。这是一个完全不同的主题。

【讨论】:

【参考方案11】:

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

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

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

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

【讨论】:

【参考方案12】:

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

【讨论】:

【参考方案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>

现在您可以在这里看到 boxbox1 是两 (2) 个不同的 &lt;div&gt; 元素,但我们可以将 boxbg-color-red 类应用于两者他们。

概念是OOP 语言中的继承。

【讨论】:

【参考方案14】:

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

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

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

4) 示例:-

&lt;style&gt; 声明中的类 - .red-background background-color: red;

&lt;style&gt; 声明中的 ID - #blue-background background-color: blue;

&lt;div class="red-background" id="blue-background"&gt;Hello&lt;/div&gt; 这里的背景将是蓝色的

【讨论】:

【参考方案15】:

idclass是两个Global / Standard HTML attribute(下面的全局属性可以用在任何HTML元素上。)

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

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

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

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

【讨论】:

【参考方案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

【讨论】:

【参考方案17】:

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

【讨论】:

这不提供任何新信息。在回答时,尤其是在回答一个旧的、很好回答的问题时,您必须在添加新答案之前通读所有现有答案,以确保您没有重复已经说过的话。

以上是关于id 和 class 有啥区别?的主要内容,如果未能解决你的问题,请参考以下文章

html中,id,name,class之间的有啥区别?

CSS 的 ID 和 Class 有啥区别?如何正确使用它们

CSS 的 ID 和 Class 有啥区别?如何正确使用它们

CSS 的 ID 和 Class 有啥区别?如何正确使用它们

html中,id,name,class之间的有啥区别?

CSS 的 ID 和 Class 有啥区别?如何正确使用它们