id和class之间有什么区别?

问题描述 投票:206回答:14

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

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

html css class id
14个回答
304
投票

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


2
投票

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

应该使用类来应用CSS。

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


0
投票

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

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

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

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


0
投票

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


0
投票

在高级开发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>

现在你可以在这里看到boxbox1是两(2)个不同的<div>元素,但我们可以将boxbg-color-red类应用于它们。

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


0
投票

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


157
投票

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

<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属性被告知要穿绿色衬衫,他将无视先前穿红色衬衫的要求。

更具体的选择者获胜。


16
投票

在哪里使用ID与班级

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

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


7
投票

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

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

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

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

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

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

还有一堂课


6
投票

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

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


5
投票

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

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

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

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

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


5
投票

类就像类别。许多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元素,并且我使用类来访问/应用各种元素的样式。


5
投票

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


2
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.