当涉及到CSS时,<div class="">和<div id="">之间有什么区别?是否可以使用<div id="">?
我看到不同的开发人员用这两种方式来做这件事,因为我是自学的,所以我从来没有真正弄清楚。
当涉及到CSS时,<div class="">和<div id="">之间有什么区别?是否可以使用<div id="">?
我看到不同的开发人员用这两种方式来做这件事,因为我是自学的,所以我从来没有真正弄清楚。
当前回答
在高级开发id中,我们可以使用JavaScript。
为了可重复的目的,类比id更方便,因为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- colour -red类应用于它们。
这个概念是面向对象语言中的继承。
其他回答
一个CLASS应该用于您希望具有相同样式的多个元素。ID应该用于唯一的元素。请参阅本教程。
如果您想成为一个严格的墨守成规者,或者如果您希望您的页面符合标准,那么您应该参考W3C标准。
类就像类别。许多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="…"" >
而且还有课
CSS是面向对象的。ID表示实例,class表示类。
或许打个比方有助于理解其中的区别:
<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />
学生证是不同的。校园里不允许两个学生使用相同的学生证。然而,许多学生可以并且愿意与其他同学共享至少一个班级。
把多个学生放在一个班级标题下是可以的,比如生物。但把多个学生放在一个学号下是不可接受的。
当通过学校对讲系统发布规则时,你可以向一个班级发布规则:
“明天,所有的学生都要穿一件红衬衫去上生物课。”
.Biology {
color: red;
}
或者你可以给一个特定的学生规则,通过调用他的唯一ID:
“乔纳森·桑普森明天要穿绿色衬衫。”
#JonathanSampson {
color: green;
}
在这种情况下,乔纳森·桑普森收到了两个命令:一个是生物课上的学生,另一个是直接要求。因为通过id属性直接告诉Jonathan穿绿色衬衫,所以他将忽略先前穿红色衬衫的请求。
更具体的选择器获胜。