id 和 class 有啥区别?
Posted
技术标签:
【中文标题】id 和 class 有啥区别?【英文标题】:What's the difference between an id and a class?id 和 class 有什么区别? 【发布时间】:2010-10-07 08:07:39 【问题描述】:<div class="">
和 <div id="">
在 CSS 方面有什么区别?用<div id="">
可以吗?
我看到不同的开发人员在这两种方式中都这样做,而且由于我是自学成才的,所以我从来没有真正弄清楚。
【问题讨论】:
【参考方案1】:ids
必须是唯一的,因为class
可以应用于许多事情。在 CSS 中,id
s 看起来像 #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
选择器。
【讨论】:
对于那些关心的人来说,#intro 优先的原因是因为某种称为特异性的东西:w3.org/TR/CSS2/cascade.html#specificity TBH,没有人再使用 id 了,除非它与 javascript 集成有关(当你需要一个唯一值时)。它是 html 剩余的,你不需要仅仅因为它存在就使用它。说你只有一个标题,所以你需要 id 而不是 class 可能是正确的。但是,假设您有一个带有样式属性的搜索栏。如果您想稍后在页面末尾添加另一个具有相同属性的搜索栏,则不能,因为 id 只能使用一次。老实说,我只是看不到 id 的任何用途。它不会使您的代码更有条理或任何东西。 只是把这两件事混淆了很长时间。现在我明白了“id”应该用唯一元素来引用,而“class”可以根据它们的区别应用于多个元素或事物 我更喜欢以这种方式查看 ID:如果您有许多相似的元素(例如<li>
in 和 <ul>
)并且您希望有一个 single其中一个表现不同(CSS或JS无关紧要),然后你使用id
属性。
ID 是标识符,CLASS 是样式规则列表,它们的存在目的不同【参考方案2】:
也许一个类比将有助于理解差异:
<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />
学生 ID 卡是不同的。校园里没有两个学生会拥有同一张学生ID卡。但是,许多学生可以并且将彼此共享至少一个班级。
可以将多个学生放在一个班级标题下,例如生物学。但是将多个学生放在一个学生ID下是绝对不能接受的。
当通过学校对讲系统给出Rules时,您可以将Rules分配给Class:
“明天,所有学生都要穿红衬衫上生物课。”
.Biology
color: red;
或者您可以通过调用特定学生的唯一 ID 来为特定学生指定规则:
“乔纳森·桑普森明天要穿一件绿色衬衫。”
#JonathanSampson
color: green;
在这种情况下,Jonathan Sampson 收到两条命令:一条是生物课的学生,另一条是直接要求。因为 id 属性直接告诉乔纳森穿绿色衬衫,所以他会忽略之前的穿红色衬衫的请求。
更具体的选择器获胜。
【讨论】:
可能会造成混淆。你不能在同一页面上<student id="JonathanSampson" class="Physics" />
@LucM 为什么不呢? <div id="SomeId" class="SomeClass"></div>
完全有效
@Basic id 在页面上必须是唯一的。你不能有<student id="JonathanSampson" class="Biology" />
和<student id="JonathanSampson" class="Physics" />
@LucM 我误解了你的意思 - 非常正确,id 必须是唯一的,但你可以这样做 <student id="JonathanSampson" class="Biology Physics" />
【参考方案3】:
在哪里使用 ID 与类
两者之间的简单区别在于,虽然一个类可以在一个页面上重复使用,但一个 ID 只能在每个页面上使用一次。因此,在标记页面主要内容的 div 元素上使用 ID 是合适的,因为只有一个主要内容部分。相反,您必须使用一个类来设置表格上的交替行颜色,因为根据定义,它们将被多次使用。
ID 是一个非常强大的工具。具有 ID 的元素可以是一段 JavaScript 的目标,该 JavaScript 以某种方式操纵该元素或其内容。 ID 属性可用作内部链接的目标,将锚标记替换为名称属性。最后,如果您使您的 ID 清晰且合乎逻辑,它们可以作为文档中的一种“自我文档”。例如,如果块的开始标签的 ID 为“main”、“header”、“footer”,则不必在块之前添加注释说明代码块将包含主要内容"等。
【讨论】:
【参考方案4】:一个id在整个页面中必须是唯一的。
一个类可能适用于许多元素。
有时,使用 id 是个好主意。
在一个页面中,你通常有一个页脚,一个页眉......
那么页脚可能会进入一个带有id的div
还有一门课
【讨论】:
【参考方案5】:ID 是唯一的。上课不是。元素也可以有多个类。类也可以动态添加和删除到元素中。
在任何可以使用 ID 的地方,您都可以使用类。反之则不然。
惯例似乎是对每个页面上的页面元素(如“导航栏”或“菜单”)使用 ID,并为其他所有内容使用类,但这只是惯例,您会发现用法差异很大。
另一个区别是,对于表单输入元素,<label>
元素通过 ID 引用字段,因此如果要使用 <label>
,则需要使用 ID。是一个可访问性的东西,你真的应该使用它。
在过去的几年里,ID 也是首选,因为它们可以在 Javascript (getElementById) 中轻松访问。随着 jQuery 和其他 Javascript 框架的出现,这几乎不再是问题。
【讨论】:
【参考方案6】:CLASS 应该用于需要相同样式的多个元素。 ID 应该用于唯一元素。看到这个tutorial。
如果您想成为一个严格的墨守成规者,或者如果您希望您的网页符合标准的validated,您应该参考W3C standards。
【讨论】:
【参考方案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 元素,并使用类来访问/应用样式到广泛的元素。
【讨论】:
【参考方案8】:CSS 是面向对象的。 ID 表示实例,类表示类。
【讨论】:
【参考方案9】:在应用 CSS 时,将其应用到一个类上,并尽量避免应用到一个 id 上。 ID 只能在 JavaScript 中用于获取元素或用于任何事件绑定。
应该使用类来应用 CSS。
有时您必须使用类进行事件绑定。在这种情况下,尽量避免用于应用 CSS 的类,而是添加没有相应 CSS 的新类。当您需要更改任何类的 CSS 或同时更改任何元素的 CSS 类名称时,这会有所帮助。
【讨论】:
Twitter Bootstrap 使用这个原则——即根本没有使用任何 ID (v3.3)。这是一个更极端的例子,因为他们需要他们的库尽可能通用。它确实显示了只使用类的好处——那就是您可以在更多的网站上应用它而只需更少的更改【参考方案10】: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 往往胜出。这是一个完全不同的主题。
【讨论】:
【参考方案11】:任何元素都可以有一个类或一个id。
一个类用于引用某种类型的显示,例如,您可能有一个用于表示该问题答案的 div 的 css 类。由于会有很多答案,因此多个 div 需要相同的样式,并且您将使用一个类。
一个 id 仅指单个元素,例如右侧的相关部分可能具有特定于它的样式,而不是在其他地方重用,它会使用一个 id。
从技术上讲,您可以对所有这些都使用类,或者在逻辑上将它们分开。但是,您不能为多个元素重复使用 id。
【讨论】:
【参考方案12】:类用于将您的样式应用于一组元素。 ID 样式仅适用于具有该 ID 的元素(应该只有一个)。通常您使用类,但如果有一次性的,您可以使用 ID(或者直接将样式粘贴到元素中)。
【讨论】:
【参考方案13】:在高级开发id中我们基本上可以使用JavaScript。
为了可重复的目的,classes 很方便,而 ids 应该是唯一的。
以下是说明上述表达式的示例:
<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-color-red
类应用于两者他们。
概念是OOP 语言中的继承。
【讨论】:
【参考方案14】:1) div id 不可重复使用,只能应用于 HTML 的一个元素,而 div 类可以添加到多个元素。
2) 一个 id 更重要,如果两者都应用于同一个元素并且具有冲突的样式,则将应用 id 的样式。
3) 样式元素总是通过放置一个 . (点)在他们的名字前面,而 div id 类通过在他们的名字前面放一个 #(哈希)来引用。
4) 示例:-
<style>
声明中的类 -.red-background background-color: red;
<style>
声明中的 ID -#blue-background background-color: blue;
<div class="red-background" id="blue-background">Hello</div>
这里的背景将是蓝色的
【讨论】:
【参考方案15】:id
和class
是两个Global / Standard HTML attribute(下面的全局属性可以用在任何HTML元素上。)
class
为元素指定一个或多个类名(指样式表中的类)
id
为一个元素指定一个唯一的id
id 属性提供了一个元素文档范围的唯一标识符,其中 class 属性提供了一种对相似元素进行分类的方法。
id 属性值在 HTML 页面中必须是唯一的,其中 class 属性可以在您想要应用相同属性的任何地方重复使用
【讨论】:
【参考方案16】:Class 用于具有共同属性的多个元素。例如,如果您希望 p 和 body 标签使用相同的颜色和字体,请使用 class 属性或在一个部门本身中。
另一方面,Id 用于突出显示单个元素的属性,并且仅用于特定元素。例如,我们有一个带有一些属性的 h1 标签,我们不希望它们在整个页面的任何其他元素中重复。
需要注意的是,如果我们在一个元素中同时使用class和id,*id会覆盖类属性。*仅仅是因为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>
我们生成输出
Output
【讨论】:
【参考方案17】:在 CSS 中,类选择器是一个以句点 (“.”) 开头的名称,而 ID 选择器是一个以井号 (“#”) 开头的名称。 ID和类的区别在于ID可以用来标识一个元素,而一个类可以用来标识多个元素。
【讨论】:
这不提供任何新信息。在回答时,尤其是在回答一个旧的、很好回答的问题时,您必须在添加新答案之前通读所有现有答案,以确保您没有重复已经说过的话。以上是关于id 和 class 有啥区别?的主要内容,如果未能解决你的问题,请参考以下文章
CSS 的 ID 和 Class 有啥区别?如何正确使用它们
CSS 的 ID 和 Class 有啥区别?如何正确使用它们