css选择器对id中含点号、冒号、空格等字符不支持，会误解析为类名或伪类；数字开头id需unicode转义且兼容性差；必须使用连字符分隔并加字母前缀，同时确保id全局唯一。
id含点号或冒号时CSS选择器失效
浏览器解析 #user.name 时，会把它当作「id=user 且 class=name」两个条件的组合，而不是一个带点的ID。哪怕HTML里写的是 <div id="user.name"></div>，CSS规则 #user.name { color: red; } 也完全不生效——这不是bug，是CSS语法定义如此。
类似地，#btn:submit 中的冒号会被当成伪类分隔符，浏览器尝试匹配「id为btn且处于submit状态的元素」，但根本不存在这种伪类。
规避方式只有一条：别用点、冒号、空格、斜杠、@、#、$这些字符。即使HTML5规范说它们“合法”，实际在CSS和大部分JS选择器中就是废的。
- 错误写法：
id="user.email"、id="nav:mobile"、id="item 1" - 正确写法：
id="user-email"、id="nav-mobile"、id="item-1" - 若服务端已有不可改的字段（如数据库字段
user.email），前端必须转义：拼成id="user-email"或用data-id="user.email"存原始值
以数字开头的id在CSS中要转义才能用
id="123header" 在HTML里能解析，但CSS里写 #123header 会被当成「类型选择器123 + 属性选择器header」，直接无效。必须写成 #\31 23header（注意 \31 后面有空格），这是Unicode转义规则，可读性差且容易漏空格。
更麻烦的是，不同浏览器对这种转义的支持程度不一，IE和旧版Safari尤其容易出问题。开发者工具里能看到元素有id，但样式死活不应用，大概率就是这个原因。
- 永远避免
id="1st-section"、id="2024-report"这类写法 - 统一加字母前缀：
id="section-1"、id="report-2024" - 如果模板引擎强制生成数字开头ID（比如循环索引），立刻补前缀：
id="item-{{i}}"，不是id="{{i}}"
getElementById() 能取到含特殊字符的id，但别指望它能和CSS/其他API联动
document.getElementById("user.name") 确实能返回元素——因为这个API只认字符串匹配，不走CSS解析逻辑。但这就埋下更大隐患：你用JS拿到了元素，CSS却没样式，querySelector("#user.name") 查不到，<label for="user.name"></label> 关联失效，ARIA属性也断连。
看似“能用”，实则割裂。工程中一旦出现这类混用，调试成本远高于重命名。
- 不要用
$(document.getElementById(id))来绕过jQuery限制——这等于承认设计失败，还把问题藏得更深 - 所有通过
for、aria-labelledby、aria-controls关联的ID，必须和CSS/JS选择器行为一致 - 自动化检测手段：用
document.querySelectorAll('[id]').forEach(el => { if (el.id.match(/[.\s:]/)) console.warn('Invalid id:', el.id); })
服务端渲染或组件循环中ID重复比字符问题更致命
字符不合规顶多让某条样式或脚本失效；而ID重复会让 document.getElementById() 永远只返回第一个，后续所有基于该ID的逻辑全部错位。Vue/React组件里写死 id="modal"，父组件引用两次，就必然冲突。
这个问题在SSR+Hydration场景下更隐蔽：服务端生成的id和客户端hydrate时生成的id稍有差异，React直接报mismatch警告，Vue可能静默失败。
- 动态生成ID必须带唯一上下文：
id="modal-${uuid()}"、id="user-${userId}-avatar" - 组件内避免硬编码id，改用prop传入前缀：
<myinput idprefix="login-form"></myinput>→ 内部生成id="login-form-username" - 纯展示用途（如锚点跳转）可放宽，但只要涉及JS操作或ARIA关联，就必须严格唯一+合规字符
真正难处理的从来不是“能不能用”，而是“用了之后哪部分失效、什么时候失效、为什么查不到”。字符合规是底线，唯一性是前提，两者缺一不可——尤其当代码要跑在政企内网的IE11或旧版Edge上时，少一个连字符都可能让整个交互链路崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
