css中的id和class的区别分别是干什么的？使用场景是什么？底层原理是什么？

最新推荐文章于 2025-05-11 17:23:59 发布

快点好好学习吧

最新推荐文章于 2025-05-11 17:23:59 发布

阅读量1.8k

点赞数 6

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/qq_36777143/article/details/143382085

版权

前端专栏收录该内容

97 篇文章

订阅专栏

CSS 中的 ID 和 Class 区别

在 CSS 中，id 和 class 都是用来标识 HTML 元素的方式，但它们之间有一些重要的区别，在使用场景和底层原理上也有所不同。

1. 定义与用途

ID (Identifier)：id 属性用于唯一标识一个 HTML 元素。在同一个文档中，id 必须是唯一的，不能有两个或多个元素拥有相同的 id。id 通常用于需要单独控制某个特定元素的情况。
Class (Class)：class 属性用于标识一个或多个 HTML 元素。与 id 不同，class 可以在同一个文档中多次使用，以表示具有相同类别的多个元素。class 通常用于需要控制一组具有相同样式的元素的情况。

2. 使用场景

ID 的使用场景：
- 唯一元素的样式控制：当需要为页面上的某个唯一元素设置样式时，可以使用 id。
- JavaScript 选择器：在 JavaScript 中，可以使用 document.getElementById 方法来获取和操作具有特定 id 的元素。
- 锚点链接：id 可以用作页面内的锚点链接目标，用户可以直接跳转到页面中的某个部分。
Class 的使用场景：
- 多个元素的样式控制：当需要为多个具有相同样式的元素设置样式时，可以使用 class。
- JavaScript 类选择器：在 JavaScript 中，可以使用 document.getElementsByClassName 方法来获取具有特定 class 的所有元素。
- 复用样式：通过定义通用的样式类，可以在多个地方复用相同的样式。

3. 示例代码

以下是使用 id 和 class 的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID vs Class Example</title>
    <style>
        /* 使用 ID */
        #unique-element {
            color: blue;
            font-weight: bold;
        }

        /* 使用 Class */
        .common-style {
            color: red;
            font-style: italic;
        }
    </style>
</head>
<body>
    <p id="unique-element">这是一个唯一元素。</p>
    <p class="common-style">这是一个具有共同样式的元素。</p>
    <p class="common-style">这是另一个具有共同样式的元素。</p>
</body>
</html>

在这个示例中：

#unique-element 是一个具有唯一 id 的段落元素，其文本颜色为蓝色，字体加粗。
.common-style 是一个具有通用样式的类，被两个段落元素使用，它们的文本颜色为红色，字体斜体。

4. 底层原理

选择器权重：在 CSS 中，id 选择器的权重高于 class 选择器。具体来说，id 选择器的权重为 100，而 class 选择器的权重为 10。这意味着如果一个元素同时使用了 id 和 class，并且这两个选择器的样式冲突，那么 id 选择器的样式会优先生效。
DOM 结构：在 DOM（文档对象模型）中，id 和 class 都是元素的属性。通过 JavaScript，可以使用 getElementById 和 getElementsByClassName 方法来选择具有特定 id 或 class 的元素。