CSS中id和class的区别？

Posted 2023-05-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS中id和class的区别？相关的知识，希望对你有一定的参考价值。

class可以在页面里面重复使用，
id由于在页面里面只能出现一次，所以不能重复使用，
所以尽量用class来写，这样能在页面里面重复引用你写的css，减小工作量和代码量。

这种情况尽量用id：页面大的模块里面，用id来区分不同的模块。
比如页面里面有这样的模块：最新新闻，推荐新闻等。就可以考虑用id来区分。

还有一点，由于id是页面中唯一的，更多的是定义来留给给页面里面的javascript用。

补充：class和id在页面里面的使用方法：
class：
<style type="text/css">
.footerbackground:red;
</style> <div class="footer">footer</div>
id： <style type="text/css">
#footerbackground:red;
</style>
<div id="footer">footer</div>

定义class的css是用点：“.”，如.footer
定义id的css是用井号“#”，如#footer

//让div居中对齐

让div内的内容（包括文字及图片）居中的代码是： text-align:center;

<style type="text/css">
刚刚入门，要记住。

.align-center
margin:0 auto; /* 居中这个是必须的，，其它的属性非必须 */
width:500px; /* 给个宽度顶到浏览器的两边就看不出居中效果了 */
background:red; /* 背景色 */
text-align:center; /* 文字等内容居中 */

</style> 参考技术A ID 是唯一的，一个页面只能有一次这个属性
class 可以同一页面多次调用这个属性

id 和 class 有啥区别？

【中文标题】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 中，ids 看起来像 #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可以用来标识一个元素，而一个类可以用来标识多个元素。