id选择器必须以#开头，不可省略或误写为.或无前缀；id值需全局唯一、合法命名（不以数字开头、不含空格中文）、大小写敏感；语义标识用id，样式控制用class。
id 选择器必须用 # 开头，不能漏掉或写成 .
很多人写 CSS 时把 #header 误写成 .header 或直接写 header，结果样式完全不生效。这是因为 id 选择器语法强制要求以 # 为前缀，浏览器根本不认 header{} 这种写法——它会被当成标签选择器，去匹配所有 <header></header> 元素，而不是你想要的 <div id="header">。<ul>
<li>✅ 正确：<code>#main-nav { color: #222; }
main-nav { ... }（匹配标签）、.main-nav { ... }（匹配 class）# main-nav 是无效写法，会变成后代选择器id 值必须全局唯一，重复会导致 JavaScript 和可访问性失效
HTML5 规定同一个页面中不能有两个元素共用一个 id。表面上看，CSS 可能“看起来还行”，但实际埋下大坑：比如 document.getElementById("submit-btn") 永远只返回第一个匹配元素，后续按钮完全不可控；屏幕阅读器也会跳过重复 id 的 <label for="submit-btn"></label> 关联，导致表单无法被无障碍使用。
- 检查方法：在浏览器开发者工具 Elements 面板按
Ctrl+F搜id="xxx"，确认只出现一次 - 动态渲染时（如 Vue/React 循环），别写死
id="item"，改用id="item-{{index}}"或id={`item-${i}`} - 需要复用样式？用
class，不是id——id不是“带样式的 class”
id 名称不能以数字开头，也不能含空格或中文
像 id="1st-section" 或 id="用户头像" 看似直观，但 HTML5 解析器直接报错或静默忽略。浏览器可能把它当作文本内容渲染，也可能让 getElementById() 返回 null，而你还在找 JS 报错在哪。
- ✅ 合法：
id="section1"、id="user-avatar"、id="nav-main" - ❌ 非法：
id="1section"（数字开头）、id="top section"（空格）、id="首页"（中文）、id="#login"（# 是 CSS 符号，不能进属性值） - 大小写敏感：
id="Header"和id="header"是两个不同 ID，别混用
别把 id 当样式开关，语义优先，状态归 class 管
看到 id="red-button" 或 id="hidden-panel" 就该警觉——这违反了关注点分离。id 是为了唯一标识，不是描述颜色、显隐或尺寸。一旦设计改版，你得批量改 HTML 的 id，而 class 才是管样式的正确位置。
立即学习“前端免费学习笔记（深入）”；
- ❌ 坏习惯：
<button id="big-red-submit"></button>→ 改主题时全得重写 HTML - ✅ 好做法：
<button id="submit-button" class="btn btn--large btn--error"></button>，样式全由 class 控制 - JS 绑定事件时，用
id定位（稳定、唯一），但显示逻辑（如is-loading）用class切换
id 的真正难点不在写法，而在“什么时候不该用它”——尤其当团队开始加交互、做无障碍、跑自动化测试时，一个随意的 id="temp" 可能卡住整个流程。
