id选择器用#开头匹配唯一id属性，不可重复使用，值须字母开头、大小写敏感；优先级过高易引发覆盖和冲突，现代开发中应限用于锚点、表单关联等语义场景，样式控制优先用class。
id 选择器的写法和基本规则
HTML 中的 id 属性是唯一标识符，CSS 里用 # 开头匹配它——不是 .id，也不是 id="xxx" 直接写进样式里。
常见错误是把 id 当成类名用，比如写成 .header-id，结果样式完全不生效；或者在多个元素上重复用了同一个 id，浏览器不会报错，但 CSS 只会作用于第一个匹配元素，JS 的 document.getElementById() 也只会返回第一个。
-
id值必须以字母开头，不能纯数字或以连字符/下划线开头（如123box、-main都非法） - 大小写敏感：HTML 中
id="Nav"和id="nav"是两个不同值 - 空格、点号、冒号等特殊字符需转义才能在 CSS 里使用，例如
id="user.name"要写成#user\.name
为什么 id 选择器优先级高，以及它带来的麻烦
#header 的优先级高于 .header 和 div，甚至高于大多数内联样式以外的组合选择器。这不是优势，而是隐患。
项目一变大，你很快会发现：某个按钮颜色改不掉，查半天发现是某个祖辈组件里写了 #submit-btn { color: red; }，硬生生把所有同名 id 全覆盖了；或者用 Web Components / 框架（如 Vue）动态生成 DOM 时，不小心复用了 id，导致 getElementById() 返回错对象。
立即学习“前端免费学习笔记（深入）”；
- 不要为可复用组件的根元素设
id，改用class或data-*属性 - JS 中频繁用
getElementById()的逻辑，要考虑是否该换成querySelector('[data-role="modal"]')，更健壮 - SSR 或微前端场景下，多个子应用共用一个 HTML 文档，
id冲突概率陡增，务必加命名空间前缀（如appA-header）
id 选择器在现代 CSS 工程中的实际定位
它没被淘汰，但使用范围被大幅收窄：适合页面级锚点（<a href="#section2">）、表单 <label for="email"> 关联、无障碍属性 aria-labelledby 引用，以及极少数必须靠唯一性触发的 JS 行为。
别再用 #sidebar 控制侧边栏样式——哪怕它真只出现一次。框架组件里更不该暴露 id 给样式层，否则主题切换、暗色模式、RTL 布局都会因强耦合而翻车。
- 需要唯一性控制？优先考虑
[data-id]+ JS 管理，样式仍走 class - SEO 或可访问性要求必须用
id？那就只用在语义关键位置，样式另起 class 处理 - PostCSS 或构建工具能自动给
id加哈希前缀，但代价是破坏锚点跳转，慎用
调试 id 样式不生效的三步检查法
看到 #main-content 写了却没反应，先别怀疑浏览器，90% 是以下三个地方出问题：
- HTML 里漏写了
id属性，或者拼错了（main-contnet），用浏览器 Elements 面板直接搜id=确认是否存在 - CSS 文件加载顺序不对：
#main-content在前面文件里定义，后面又有个div#main-content覆盖了它（后者优先级更高） - 元素是 JS 动态插入的，CSS 规则加载时它还不存在——这时
id选择器本身没问题，只是时机不对
真正难搞的是跨 shadow DOM 场景：#my-id 在 light DOM 里有效，在 shadow root 里就完全不可见，得用 :host(:has(#my-id)) 这类新语法绕过去——这种细节，多数人第一次遇到时都得卡半小时。
