id 必须全局唯一、符合命名规范且慎用于样式：值需唯一，禁空格/中文/数字开头，特殊字符css中须转义；#id权重高但易冲突，优先用语义化类名；调试用三行js命令查重复、存在性及计算样式。
直接用 #id 写样式没问题，但真正在项目里用，90% 的失效不是语法错，而是被 DOM 状态、优先级或协作规范反向制裁。
HTML 中 id 属性怎么写才合法且可用
浏览器不拦你写 id="header-1" 或 id="nav"，但“能写”不等于“能用”。关键在三点：
-
id值必须全局唯一：同一页面出现两次id="modal"，document.getElementById('modal')只返回第一个；<label for="email"></label>会找不到对应<input id="email">；锚点跳转（如#contact）可能定位失败 - 值不能含空格、中文、制表符，首字符不能是数字：✅
id="user-profile"，❌id="user profile"、id="1section" - 若含特殊字符（如点号、括号），CSS 中必须转义：HTML 写
id="user.name"，CSS 必须写成#user\.name，否则解析失败
CSS 里 #id 选择器为什么有时不生效
不是选择器写错了，而是它太“强”反而容易被卡住：
- 权重是
0,1,0,0，碾压所有类名（0,0,1,0）和标签名（0,0,0,1）。一旦第三方组件或后续 CSS 加了#header，你就只能靠!important或内联style覆盖——这等于放弃样式可维护性 - 父容器隐藏会直接让整个效果消失：
#sidebar样式再对，若它的父级.page设了display: none，就什么也看不到 - 开发者工具里“Computed”面板中样式被划掉？说明被更高优先级规则覆盖；如果看到
element.style.color，那是 JS 写的内联样式（权重1,0,0,0），#id也压不住
什么时候该用 #id，什么时候该用 .class
ID 不是“高级版 class”，它的角色是语义锚点，不是样式工具：
- ✅ 该用
id：做页面内跳转（@#@#@#@#@#@#@#@#@#@0+<section id="faq"></section>）、JS 获取单个节点（document.getElementById('submit-btn')）、表单可访问性（<label for="email"></label>对应<input id="email">） - ❌ 少用甚至禁用
#id写样式：BEM 规范明确禁止，Vue/React 组件循环渲染时写死id="item"会导致重复 ID；动态生成 ID（如id="item-{{id}}"）又难保证跨端一致 - 替代方案更稳：用语义化类名，比如
.header-main、.modal-backdrop，配合 BEM 嵌套（.modal__close），复用、覆盖、条件切换都自然
调试 #id 相关问题最有效的三行命令
别靠肉眼扫 HTML，终端里敲几下就能定位根因：
- 查是否重复：
document.querySelectorAll('[id="main-header"]').length—— 返回大于 1 就立刻修 - 查元素是否存在：
document.getElementById('main-header')—— 返回null说明 DOM 还没挂载，或 ID 拼错/大小写不对 - 查样式是否被覆盖：
getComputedStyle(document.getElementById('main-header')).backgroundColor—— 直接看最终计算值，绕过“哪些规则被划掉”的干扰
ID 的真正难点不在“怎么写”，而在“为什么不敢随便用”——它绑定的是 DOM 结构、JS 行为、可访问性三条线，动一处，三处都得同步校验。稍不注意，一个 #id 就成了线上 bug 的隐性入口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
