[分享]css中class和id区别

在 CSS 中，class 和 id 是两种最基本的选择器，它们同样可以用于为 HTML 元素定义样式。class 与 id 的区别在哪里呢？首先，它们的语法有着不同。id 使用 "&quo...

在 CSS 中，class 和 id 是两种最基本的选择器，它们同样可以用于为 HTML 元素定义样式。class 与 id 的区别在哪里呢？

首先，它们的语法有着不同。id 使用 "#" 符号开头，其后跟随着一个唯一的标识符，用于选择一个唯一的元素，如下所示：

#unique-id {
    color: red;
}

它会为一个特定的元素设置颜色为红色。

class 则使用 "." 符号开头，其后跟着一个类名，可以同时用于多个元素，如下所示：

.class-name {
    font-size: 14px;
}

它将为带有 class 属性为 class-name 的所有元素设置字体大小为 14px。

其次，id 只能在 HTML 文档中使用一次，而 class 可以多次使用。

最后，由于 id 必须是唯一的，因此它具有更高的优先级。在 CSS 中，优先级规则非常简单：id > class > tag。当多个选择器应用于同一个元素时，最终应用的样式将是优先级最高的选择器。

例如，在下面的 HTML 中：

<div id="my-div" class="my-class">Hello</div>

如果同时应用以下两个样式：

#my-div {
    color: red;
}

.my-class {
    color: blue;
}

那么最终应用于 "Hello" 文本的颜色将是红色，因为 "#my-div" 选择器优先级比 ".my-class" 高。

在编写 CSS 样式表时，选择 class 还是 id 取决于具体的需求和场景。如果要设置一些通用的样式，就可以使用 class；如果要针对某个具体元素进行修改，则应该使用 id。在设计和开发中，了解 class 和 id 的区别是非常重要的，特别是在代码重构和维护时。