id属性必须全局唯一，class可重复使用；id选择器权重（100）远高于类选择器（单个10），且!important无法跨层级覆盖；现代开发中id仅适用于label关联、锚点跳转、自动化测试及aria属性等有限场景，css中应避免使用id选择器。

id属性必须全局唯一，class可以重复使用

HTML 规范强制要求 id 值在整个文档中只能出现一次。浏览器不校验重复，但后果明确：CSS 样式可能只作用于第一个匹配元素；document.getElementById() 永远只返回第一个；React/Vue 的 hydration 会直接失败。而 class 属性天生设计为可复用——多个元素共用同一个类名完全合法，一个元素也可以同时拥有多个类名（如 class="btn btn-primary js-submit"）。

#header 和 .btn 的优先级不是“谁更强”，而是“不可覆盖”

ID 选择器权重固定为 100，类选择器单个是 10。这意味着哪怕你写 .submit-btn.submit-btn.submit-btn（权重 30），也压不过 #submit-btn（权重 100）。这不是“建议避免”，而是调试时真实卡点：你改了 CSS 却没生效，大概率是某个父容器或组件悄悄用了 ID 选择器。更麻烦的是，!important 在这种跨权重层级冲突里无效——它只在同级权重内起作用。

现代开发中，ID 几乎不该出现在 CSS 文件里

真正需要 ID 的场景非常有限：label[for="email"] 必须对应 input#email；页面内锚点跳转依赖 id="section-2"；自动化测试用 data-testid 或稳定 ID 定位元素。除此之外，用 ID 写样式等于主动放弃组合性、主题切换能力和团队协作安全性。BEM、CSS Modules、Tailwind 等主流方案都默认绕开 ID——不是技术不能，而是语义和工程成本不允许。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

JS 查 DOM 时，querySelector('.modal') 比 getElementById('modal') 更健壮

看起来 getElementById() 更快，但它依赖 ID 绝对存在且唯一。动态渲染、条件展示、服务端模板拼接都容易导致 ID 重复或缺失。而 document.querySelector('.js-modal') 或 document.querySelector('[data-component="modal"]') 虽然多一次遍历，却能天然兼容重复、条件、批量场景。如果真要给 JS 用专用标识，推荐带前缀的 class（如 class="js-dropdown-toggle"）或 data- 属性，而不是把样式层的 ID 当作行为层的钩子。

最常被忽略的其实是可访问性约束：aria-labelledby、aria-controls、aria-describedby 这些属性值必须指向真实存在的、唯一的 ID。这里 class 无法替代——不是语法问题，是标准强制要求。所以 ID 不是“过时”，而是用途窄、责任重，用错地方比不用还危险。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！