应优先使用 #name 而非 [id="name"]，因 #name 是专为 id 设计的原生选择器，性能更高、可读性更强、容错性略好；仅在需匹配重复 id、组合属性筛选或无法修改 html 的特殊场景下才用 [id="name"]。
直接用 [id="name"] 可以匹配，但多数时候它不是最佳选择——ID 本应唯一，CSS 选择器有更自然、更高效的方式。
为什么不用 [id="name"] 而用 #name
ID 在 HTML 中必须全局唯一（即使浏览器不严格校验，语义和可维护性也要求如此）。CSS 的 #name 就是专为 ID 设计的原生选择器，性能优于属性选择器，且可读性更强。
-
[id="name"]是通用属性匹配，会遍历所有元素检查id属性值，哪怕该元素没有id属性也会被纳入比对范围 -
#name由浏览器内部哈希表直接查找，几乎常数时间完成 - 若误写成
[id="Name"]（大小写敏感），而实际 HTML 是id="name"，样式就完全失效；#name不区分大小写（HTML ID 本身不区分），容错略高
什么情况下才该用 [id="name"]
极少数需要“模拟 ID 存在性判断”或绕过 ID 语义限制的场景，比如：
- 测试环境注入临时标记：
<div id="temp-debug" data-test="true">，你不能改 HTML 的 <code>id，但想用 CSS 标出它 →[id="temp-debug"] { outline: 2px solid red; } - 处理第三方库生成的非标准 HTML，其中多个元素意外拥有相同
id（此时#name仍只匹配第一个，而[id="name"]可批量命中） - 需要配合其他属性组合筛选，例如：
[id="submit-btn"][disabled]，这时属性选择器是必要手段 - 优先级相同（都是 specificity 值 100），不会因写法不同导致样式覆盖异常
- 动态插入元素后，
#name依然有效；[id="name"]同样生效，无差别 - JavaScript 中
document.querySelector('#name')和document.querySelector('[id="name"]')返回同一个元素（前提是 ID 真唯一） - 若页面存在重复 ID，
#name只返回第一个，[id="name"]可通过querySelectorAll拿到全部 —— 这反而暴露了 HTML 结构问题
[id="name"] 和 #name 的实际效果差异
两者在绝大多数渲染结果上一致，但行为底层不同：
真正要注意的，不是选哪个语法，而是确保 id 值本身合法（不能以数字开头、不能含空格或特殊符号）、不重复、且确实需要 ID —— 如果只是想给一组元素加样式，class 才是语义正确又灵活的选择。
