刚学写网页的时候，总分不清id和class到底有啥不一样。就像买外设，有人看品牌，有人看功能，表面上差不多，用起来差别可大了。
id 是唯一的“身份证”
每个 HTML 元素的 id 就像人的身份证号，全页面只能出现一次。你不能有两个一模一样的身份证，也不能有两个相同的 id。
比如你想给页面上的导航栏加个标记：
<nav id="main-nav">导航菜单</nav>这个 id="main-nav" 在整个页面里只能用一次。JavaScript 拿它找元素特别快，就像快递员凭身份证找人一样精准。
class 是可复用的“标签”
class 就不一样了，它像衣服上的标签，可以多人共用。比如你买了三款同系列的机械键盘，都贴上“青轴爱好者”的标签，谁用都行。
在代码里，多个元素可以共享同一个 class：
<button class="btn-primary">确认</button>
<button class="btn-primary">保存</button>
<button class="btn-primary">提交</button>这样写 CSS 的时候，一键统一样式，改起来也省事。
实际场景对比
假设你在做个人主页，页首放了个头像区域，全站就这一个地方需要特殊样式和行为。这时候用 id 更合适：
<div id="user-avatar">头像图片</div>但如果你在列外设清单，每项都有“推荐”标志，那就该用 class：
<li class="recommend-item">无线耳机</li>
<li class="recommend-item">机械键盘</li>
<li class="recommend-item">电竞鼠标</li>CSS 和 JavaScript 里的用法差异
选中 id 写样式要用井号：
#main-nav { background: #333; }class 则用点：
.btn-primary { color: white; }JavaScript 中，document.getElementById('user-avatar') 找的是唯一元素，而 getElementsByClassName 返回的是一组，处理方式自然不同。
说白了，id 是“专属定制”，class 是“批量生产”。写网页时想清楚是要唯一标识，还是通用分类，选对了，后面少踩坑。