id和class之间有什么区别？

Question

CSS <div class="">和<div id="">CSS 之间的区别是什么？可以使用<div id="">吗？

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

Answer 1

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

Answer 2

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

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

学生ID卡是不同的.没有两个学生在校园里都会有相同的学生ID卡.但是,许多学生可以并且将至少分享一个班级.

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

当给出的规则在学校对讲系统,你可以给规则一个类:

"明天,所有学生都要穿红衬衫去生物课."

.Biology {
  color: red;
}

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

"Jonathan Sampson明天要穿绿色衬衫."

#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

<div id ="footer"class ="...">

还有一堂课

Answer 5

一类应该用于您想为同一样式的多个元素.的ID应该是一个唯一的元件.请参阅本教程.

你应该是指W3C标准,如果你想成为一个严格循规蹈矩,或者如果你希望你的页面被验证的标准.

Answer 6

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

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

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

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

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

Answer 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元素,并且我使用类来访问/应用各种元素的样式.

Answer 8

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