id选择器需确保html中id属性唯一、合法且正确拼写，css中用#id引用，注意转义特殊字符；失效时优先检查dom是否存在、样式是否被覆盖或父容器隐藏；id还承担锚点、js钩子和可访问性功能。
直接用 #id 就能为页面中唯一元素加样式，关键不在“能不能写”，而在“写对了是否真生效”——ID 选择器虽权重高（100），但容易被忽略的细节反而决定成败。
ID 选择器怎么写才有效
HTML 中先给目标元素明确设置 id 属性，注意值必须全局唯一、不带空格或中文，且不能重复：
-
<header id="main-header">...</header>✅ 正确 <div class="main-header">... ❌ 这是类名，<code>#main-header选不到-
<nav id="nav-1">...<nav id="nav-1"></nav></nav>❌ 同页两个相同 ID，浏览器可能只认第一个，JS 和样式都不可靠 -
#main-header { background: #2c3e50; color: white; }✅ 直接生效 -
.container #main-header✅ 可以加父级限定，但通常没必要——ID 本就唯一 -
#main-header .title✅ 选 ID 元素内部的 class，合理用于嵌套结构 -
#user.name❌ 如果 ID 含点号，必须转义：#user\.name - 检查元素是否真有该 ID：右键 → “检查”，看开发者工具里对应标签的
id属性是否存在、拼写是否一致（区分大小写） - 看“Computed”面板：被划掉的样式说明被更高优先级规则覆盖；若看到
element.style.color被设过，那是 JS 写的内联样式（权重 1000），会压倒所有外部#id - 确认父容器没隐藏：比如
#sidebar样式正常，但它的父级.page设了display: none，整个区域都不可见 - 页面内跳转：
@#@#@#@#@#@#@#@#@#@0+<section id="contact"></section>自动滚动定位 - JS 操作基础：
document.getElementById('submit-btn')是最轻量的节点获取方式 - 可访问性支持：表单
<label for="email"></label>必须匹配<input id="email">，否则屏幕阅读器无法关联 - ARIA 场景：
aria-labelledby="title-desc"依赖对应 ID 元素提供描述文本
CSS 里怎么引用这个 ID
在 CSS 文件或 <style></style> 块中，用井号开头 + ID 名，中间**不能有空格**：
写了却没反应？先查这三处
样式不显示，90% 不是选择器写错，而是被其他规则覆盖或 DOM 状态干扰：
ID 不只是用来写 CSS 的
它本质是“锚点+钩子+语义标识”，CSS 只是其中一环：
