HTML的id和class区别_HTML选择器使用场景与命名规范

新闻中心 NEWS CENTER

2025-10-21

浏览次数：次

id是唯一标识，class可复用；#id选唯一元素，.class批量设样式；推荐语义化、短横线命名，优先使用class。

html的id和class区别_html选择器使用场景与命名规范

HTML中的id和class都是用来为元素设置标识，以便通过CSS或J*aScript进行样式控制或行为操作。虽然它们看起来相似，但在使用场景、命名规范和功能上存在明显区别。

id 是唯一标识符，在同一个页面中必须唯一，不能重复。一个元素只能有一个 id，而一个 id 也只能被一个元素使用。常用于需要精准定位的场景，比如页面锚点跳转、J*aScript 操作特定元素。

class 是可复用的分类标记，可以被多个元素共用，一个元素也可以有多个 class。适合用于定义通用样式或行为，是 CSS 样式中最常用的选择器类型。

例如：

这是一段高亮文字

同样高亮

这里 id="header" 只能出现一次，而 class="highlight" 可以在多个地方使用。

MarsCode

字节跳动旗下的免费AI编程工具

339 查看详情 MarsCode

根据 id 和 class 的特性，对应的选择器使用也有所不同：

#id 选择器：适用于唯一元素的样式设置，如页头、页脚、主容器等。J*aScript 中通过 document.getElementById() 快速获取元素。
.class 选择器：适用于需要批量应用样式的场景，如按钮样式、文本强调、布局组件等。支持复用，提升开发效率。
在实际项目中，优先使用 class，除非确实需要唯一性控制，再使用 id。

良好的命名能让代码更易读、易维护。以下是常见规范：

语义化命名：使用有意义的英文单词，如 header、menu-item、error-message，避免使用 div1、box2 这类无意义名称。
使用短横线分隔（kebab-case）：推荐写法如 main-content、user-profile，不要使用下划线或驼峰。
避免关键词冲突：不要用 class="button" 同时又定义全局样式影响原生按钮，可加前缀如 btn-primary。
id 命名更具体：如 user-modal、search-input，突出其唯一用途。