当涉及到CSS时,<div class="">和<div id="">之间有什么区别?是否可以使用<div id="">?
我看到不同的开发人员用这两种方式来做这件事,因为我是自学的,所以我从来没有真正弄清楚。
当涉及到CSS时,<div class="">和<div id="">之间有什么区别?是否可以使用<div id="">?
我看到不同的开发人员用这两种方式来做这件事,因为我是自学的,所以我从来没有真正弄清楚。
当前回答
id是唯一的。不类。元素也可以有多个类。类也可以动态地添加和删除到元素中。
任何可以使用ID的地方都可以使用类。反之则不然。
惯例似乎是对每个页面上的页面元素使用id(如“导航栏”或“菜单”),对其他所有元素使用类,但这只是惯例,你会发现使用上的差异很大。
另一个区别是,对于表单输入元素,<label>元素通过ID引用字段,因此如果要使用<label>,则需要使用ID。是一个可访问性的东西,你真的应该使用它。
在过去的岁月里,id也是首选,因为它们很容易在Javascript中访问(getElementById)。随着jQuery和其他Javascript框架的出现,现在这几乎不是一个问题。
其他回答
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在整个页面中必须是唯一的。
一个类可以应用于许多元素。
有时候,使用id是个好主意。
在一个页面中,你通常有一个页脚,一个页眉…
然后页脚可以是一个带有id的div
<div id="footer" class="…"" >
而且还有课
CSS是面向对象的。ID表示实例,class表示类。
在应用CSS时,将其应用于类,并尽量避免应用于id。ID只能在JavaScript中用于获取元素或任何事件绑定。
应该使用类来应用CSS。
有时必须使用类进行事件绑定。在这种情况下,尽量避免使用用于应用CSS的类,而是添加没有相应CSS的新类。当你需要更改任何类的CSS或更改任何元素的CSS类名时,这将会有所帮助。
类用于具有公共属性的多个元素。例如,如果你想让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>
我们生成输出
输出