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

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


当前回答

类就像类别。许多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类实现,但是section仍然继承了#content .section中的通用样式。

当我进行JavaScript或CSS开发时,我通常使用id访问/操作非常特定的HTML元素,并使用类访问/应用样式到广泛的元素。

其他回答

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

一个类可以应用于许多元素。

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

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

然后页脚可以是一个带有id的div

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

而且还有课

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

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

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

另一个区别是,对于表单输入元素,<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类实现,但是section仍然继承了#content .section中的通用样式。

当我进行JavaScript或CSS开发时,我通常使用id访问/操作非常特定的HTML元素,并使用类访问/应用样式到广泛的元素。

类用于将您的样式应用于一组元素。ID样式只应用于具有该ID的元素(应该只有一个)。通常使用类,但如果只有一个类,则可以使用id(或直接将样式插入元素)。

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

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

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

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

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

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

.Biology {
  color: red;
}

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

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

#JonathanSampson {
  color: green;
}

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

更具体的选择器获胜。