css 类选择器和 id 选择器有什么区别_选择器使用规范说明

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 锚点丢失——这些都不是调试能轻松解决的。