id是唯一标识，class可复用；#id选唯一元素，.class批量设样式；推荐语义化、短横线命名，优先使用class。
HTML中的id和class都是用来为元素设置标识，以便通过CSS或JavaScript进行样式控制或行为操作。虽然它们看起来相似，但在使用场景、命名规范和功能上存在明显区别。
id 与 class 的核心区别
id 是唯一标识符，在同一个页面中必须唯一，不能重复。一个元素只能有一个 id，而一个 id 也只能被一个元素使用。常用于需要精准定位的场景，比如页面锚点跳转、JavaScript 操作特定元素。
class 是可复用的分类标记，可以被多个元素共用，一个元素也可以有多个 class。适合用于定义通用样式或行为，是 CSS 样式中最常用的选择器类型。
例如：
立即学习“前端免费学习笔记（深入）”；
<div id="header"></div>
<p class="text highlight">这是一段高亮文字</p>
<span class="highlight">同样高亮</span>
这里 id="header" 只能出现一次，而 class="highlight" 可以在多个地方使用。
CSS 选择器的使用场景
根据 id 和 class 的特性，对应的选择器使用也有所不同：
-
#id 选择器：适用于唯一元素的样式设置，如页头、页脚、主容器等。JavaScript 中通过
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，突出其唯一用途。
总结
id 用于唯一元素，class 用于可复用的样式和行为。CSS 中 class 更灵活，更适合现代开发模式。合理使用选择器并遵循命名规范，能让 HTML 结构清晰，样式易于维护。基本上就这些，不复杂但容易忽略细节。
