querySelector 无法直接选中以数字或特殊符号（如 :, ., -123）开头的 ID，因 CSS ID 选择器要求标识符合法：不能以数字开头，:、. 等有特殊含义，未转义即报错；应改用 [id="..."] 属性选择器实现精确匹配。
直接用 querySelector 选中以数字或特殊符号（如 -、_、:、. 等）开头的 ID 节点时，会报错或匹配失败，因为 CSS 选择器规范不允许 ID 选择器以数字或大多数特殊字符开头（除了下划线 _ 和连字符 -，但有前置限制）。
为什么不能直接写 #123abc 或 #-header
CSS 中，ID 选择器以 # 开头，其后必须是合法的 CSS 标识符（identifier）。根据 CSS 规范：
- ID 不能以数字开头（如
#123id是非法的） - 以连字符
-开头需满足：后面紧跟字母或下划线，且整个 ID 是合法标识符（如#-foo合法，但#-123不合法） - 冒号
:、句点.、括号等在 CSS 中有特殊含义，未转义即使用会导致语法错误
正确做法：用属性选择器替代 ID 选择器
绕过 CSS ID 选择器限制的最可靠方式，是改用属性选择器 [id="..."] —— 它不依赖 CSS 标识符规则，而是做精确字符串匹配：
-
document.querySelector('[id="123abc"]')✅ -
document.querySelector('[id="-header"]')✅ -
document.querySelector('[id="user:name"]')✅（含冒号） -
document.querySelector('[id="btn.01"]')✅（含英文句点）
注意：引号必须使用（单/双均可），ID 值保持原样，无需转义。
特殊情况：CSS ID 本身合法但需转义（较少见）
如果 ID 符合 CSS 标识符规则（如 _my-id、-myId），但包含需转义的字符（如 :、.），可用 CSS 转义语法（反斜杠 + Unicode 十六进制）：
-
document.querySelector('#user\:name')→ 冒号转义为\: -
document.querySelector('#btn\.01')→ 句点转义为\.
⚠️ 实际中极易出错，且可读性差，**强烈推荐优先使用 [id="..."] 方式**。
补充提醒：HTML ID 的命名建议
虽然 HTML5 允许 ID 包含几乎所有字符（包括空格、中文等），但为兼容性和可维护性，建议：
- ID 以字母或下划线开头
- 只用字母、数字、
-、_组成 - 避免使用
:、.、[、]等 CSS 特殊字符 - 如必须动态生成含特殊字符的 ID，请统一用
[id="..."]查询
