免费 AI IDE
id 和 class 都是 HTML 里给元素加标记的属性，核心区别在于：id 在一个页面里必须唯一，class 可以重复给多个元素用。写样式或写脚本抓元素时，这个区别直接决定你该用 #id 还是 .class。
本文基于 HTML5 梳理，先把两者的本质讲清，再给你 3 个一眼能判断的判断标准，最后说明在 CSS 里 #id 和 .class 的优先级差异，以及新手最容易踩的误用。看完你不仅能分清，还能知道什么时候该用哪个。今天这篇文章，编程狮就把这块讲透。
一、先说清楚：id 和 class 都是给元素打的「标记」
在 HTML 里，几乎每个标签都能挂属性。id 和 class 就是最常用的两个「标记属性」，作用是给元素起个名字，方便后面用 CSS 美化它、或者用 JavaScript 找到它。这两个标记属性用好了，页面结构和样式会特别清晰；用混了，后期维护和改样式都会变成噩梦。
<h1 id="title">欢迎页</h1>
<p class="intro">这是一段介绍文字</p>上面这段里，h1 挂了 id="title"，p 挂了 class="intro"。想深入标签和属性，可以先过一遍 HTML 教程 里的基础章节，把标签、属性、值的关系理顺。
一个贴近生活的比喻：id 像你的身份证号，全国只有你一个；class 像你的「职业」标签，医生和教师可以有很多人共享。所以 id 用来精准锁定「某一个」元素，class 用来批量圈出「某一类」元素。
理解 id 和 class 区别 的第一步，是先想清楚你给元素打标记到底为了什么：要么是为了单独拎出某一个做特殊处理，要么是为了批量圈出一群统一美化。前者天然指向唯一的 id，后者天然指向可复用的 class，这个出发点想对了，后面几乎不会用错。
举个具体场景：一个登录表单里，用户名输入框需要被 JavaScript 单独读取，就给它 id 等于 username；而页面上所有提示文字长一个样，就都挂 class 等于 hint，用一条 CSS 统一修饰。这就是 id 和 class 区别 在真实页面里的落点。
二、本质区别：id 唯一，class 可重复
这是两条属性最根本的分界线，一定要记牢：
- id 必须唯一：同一个页面里，id="title" 只能出现一次。浏览器和 JavaScript 也默认按「唯一」来处理，写重了会造成定位混乱。
- class 可以重复：class="intro" 可以挂在十个、一百个元素上，它们共享同一套样式或同一类标记。
<p class="intro">第一段</p>
<p class="intro">第二段</p>
<p class="intro">第三段</p>上面这段三个段落都用了 class="intro"，它们会一起被同一段 CSS 影响到。关于这类标识符和选择器的概念，编程词典 里有更系统的对照。
⚠️ 注意：id 重复在浏览器里通常不会报错，页面照样显示，但 JavaScript 用 getElementById 只会抓到第一个，剩下的一律抓不到——这种 bug 最难查，因为表面上「看起来没坏」。
记住 id 和 class 区别 最关键的一句话：唯一性归 id，复用性归 class。凡是需要被多处共享的东西，都交给 class；凡是只能属于某一个体的标识，才放进 id。
三、3 个判断标准：到底该用哪个
所谓样式复用，就是同一段 CSS 通过 class 套到多个元素上，避免把相同样式抄十遍。这也是 class 存在的最大价值：它让写一次、处处用成为可能。
每次拿不准，就问自己这三个问题，按答案选：
- 要不要复用？ 这个样式或标记要套在多个元素上，就用 class；只服务唯一一个元素，才考虑 id。
- JS 要不要单独抓它？ 如果你打算用 JavaScript 精确操作某一个元素（比如点击按钮弹窗），给它一个独一无二的 id 最稳；批量操作一组元素就用 class。
- 是不是页面锚点？ 想做「点击跳到页面某处」的锚点定位，锚点目标必须有唯一 id，这是 id 的专属用途。
写 CSS 时，复用逻辑也对应得很清楚：样式能复用的部分用 class 写一次、多处共享；只有某个元素独有的特殊样式，才值得用 id 单独写。想系统练 CSS，可以配合 CSS 教程 把选择器一节吃透。
四、CSS 里怎么选：#id 与 .class 优先级不同
在 CSS 里，id 和 class 不仅写法不同，权重也不同。用 # 开头选 id，用 . 开头选 class：
#title { color: red; } /* 选 id 为 title 的元素 */
.intro { color: blue; } /* 选所有 class 为 intro 的元素 */把两者摆在一起看优先级：
| 选择器 | 写法 | 权重 | 适用 |
|---|---|---|---|
| #id | #title |
高（100） | 唯一、强定制 |
| .class | .intro |
低（10） | 批量、可复用 |
因为 id 权重更高，一旦 #title 和 .intro 都给同一元素设了冲突的样式，id 会赢。这带来一个实战建议：样式尽量用 class 写，把 id 留给 JavaScript 和锚点——这样样式冲突时你还能用 class 覆盖，不会被高权重的 id 卡死。
实际项目里这两种属性常常搭配出现：用 class 控制长什么样，用 id 控制跳到哪。比如导航每个项共享 nav-item 这个 class 统一样式，而回到顶部按钮挂 id 等于 backTop 专门用于锚点跳转。一条页面往往是两种思路交织，分得清才不会乱。
常见误用有两个：一是用 id 写一堆通用样式，导致别的页面想复用却复用不了；二是 class 名用中文或空格，空格在 class 里是「分隔多个 class」的意思，写中文名则难以维护。
把 id 和 class 区别 放到 CSS 权重里看会更清晰：id 权重高意味着它说了算，但正因如此才不该拿它写通用样式——你越用 id 写样式，后面想覆盖就越费劲。新手最佳实践就一句：样式交给 class，id 留给行为和锚点。
从 JavaScript 角度看，id 和 class 区别 也体现在选取方式上：getElementById 直奔唯一目标，querySelectorAll 点 class 则返回一个列表让你批量遍历。写交互时，单独操作某元素用 id，批量绑定事件用 class，思路完全一致。
总结
id 和 class 都是给 HTML 元素加标记的属性，本质区别在于 id 在页面里必须唯一、class 可以重复。判断用哪个，就看要不要复用、JS 是否单独抓它、是不是锚点这三个标准。
要点带走：
- id 唯一、class 可重复，这是不可逾越的底线；
- 样式优先用 class 写，id 留给 JS 和锚点；
- 别用中文或带空格的 class 名，空格会被当成多个 class。
下一步，把 CSS 选择器和 JavaScript 选取元素一起学，前端的「定位与美化」就通了。
延伸学习
想把前端基础系统补齐，可以按这个顺序来：
常见问题
Q：一个元素能同时有 id 和 class 吗？
A：能，而且很常见。比如 <p id="lead" class="intro"> 既能被 JavaScript 用 id 精准抓到，又能和别的段落共享 intro 样式，两者互不冲突。
Q：id 重复了页面会报错吗？
A：浏览器通常不会报错，页面照常显示。但 JavaScript 的 getElementById 只返回第一个，其余抓不到，这类隐藏 bug 最难排查，所以约定上 id 必须唯一。
Q：class 名里能写空格吗？
A：空格在 class 里表示「同时挂多个 class」，比如 class="intro red" 是挂了 intro 和 red 两个类，而不是一个叫「intro red」的类。想用单个有意义的类名，就别在中间留空格。
