当涉及到CSS时,<div class="">和<div id="">之间有什么区别?是否可以使用<div id="">?
我看到不同的开发人员用这两种方式来做这件事,因为我是自学的,所以我从来没有真正弄清楚。
当涉及到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元素,并使用类访问/应用样式到广泛的元素。
其他回答
类就像类别。许多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元素,并使用类访问/应用样式到广泛的元素。
类用于具有公共属性的多个元素。例如,如果你想让p和body标签的颜色和字体相同,使用class属性或在一个除法本身。
另一方面,Id用于突出显示单个元素属性,并且仅用于特定元素。例如,我们有一个带有某些属性的h1标签,我们不希望它们在整个页面的任何其他元素中重复。
需要注意的是,如果在元素中同时使用class和id,则*id将覆盖class属性。*因为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>
我们生成输出
输出
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往往会胜出。这完全是另一个主题。
任何元素都可以有类或id。
类用于引用某种类型的显示,例如,您可能有一个css类用于表示这个问题的答案的div。因为会有很多答案,多个div将需要相同的样式,你将使用一个类。
一个id只引用一个元素,例如右边的相关部分可能有特定于它的样式,而不是在其他地方重用,它将使用一个id。
从技术上讲,您可以使用所有的类,或者在逻辑上拆分它们。但是,您不能对多个元素重用id。
id和class是两个全局/标准HTML属性(下面的全局属性可以用于任何HTML元素)。
为一个元素指定一个或多个类名(引用样式表中的类)
id元素的唯一id
id属性提供了元素文档范围内的唯一标识符,其中class属性提供了对类似元素进行分类的方法。
id属性值必须在整个HTML页面中是唯一的,class属性可以在任何想要应用相同属性的地方被重用