ID选择器要求id属性全局唯一，用于锚点、JS获取单元素等场景；类选择器可复用，是样式复用基本单位，现代CSS方法论禁用ID写样式。
类选择器和 ID 选择器的核心区别：唯一性决定用法
ID 选择器（#header）要求对应 HTML 元素的 id 属性值在整个文档中**必须唯一**，就像身份证号；类选择器（.btn）的 class 属性可被任意多个元素重复使用，类似商品标签。这不是“推荐”而是强制规范——HTML5 明确规定 id 值不得重复，浏览器解析时若发现重复，document.getElementById() 只返回第一个匹配元素，CSS 样式虽可能“生效”，但已违反语义且不可靠。
CSS 优先级差异直接影响样式覆盖逻辑
ID 选择器权重为 100，类选择器仅为 10。这意味着当两者同时作用于同一元素时，ID 规则会无条件覆盖类规则，哪怕类规则写在后面：
#nav { color: red; }
.nav-link { color: blue; }
- 这不是 bug，是 CSS 层叠（cascade）的底层机制
- 滥用 ID 会导致样式难以维护：你得不断加
!important或嵌套更深才能覆盖它 - 现代 CSS 方法论（如 BEM、ITCSS）基本禁用 ID 选择器做样式，只留作 JS 操作锚点
实际开发中该用哪个？看目的，不看“看起来像不像”
别凭直觉选，按用途分清楚：
-
用
class的场景：按钮样式（）、响应式栅格（class="col-md-6"）、状态切换（class="card is-collapsed"）——所有需要复用、组合、动态增删的场合 -
用
id的场景：页面锚点跳转（→）、JS 精准获取单个元素（document.getElementById('modal')）、表单关联（→） -
绝对不要用
id的场景：写通用组件样式、给多个元素加同一种背景/边距/字体——这会让后续改版变成噩梦
容易被忽略的硬性限制和兼容陷阱
有些坑不是逻辑问题，而是浏览器实打实不认：
立即学习“前端免费学习笔记（深入）”；
- ID 名不能以数字开头：
id="1st-item"在 Firefox/Mozilla 中完全失效，必须改成id="item-1" - ID 和 class 名都不能包含空格或特殊符号（除连字符
-和下划线_），否则 CSS 解析失败 - 虽然 HTML 允许
class="a b c"多类共存，但 ID 不支持空格分隔：id="header main"是非法写法，浏览器会截断或报错 - 用 Web Components 或 Shadow DOM 时，ID 选择器默认无法穿透作用域，而类选择器配合
:host(.active)更可控
ID 选择器不是“高级版类选择器”，它是为唯一性而生的标识符；类选择器才是样式复用的基本单位。混淆二者，轻则样式打架，重则 JS 获取错元素、无障碍（a11y）属性失效、SEO 锚点丢失——这些都不是调试能轻松解决的。
