:target样式不生效最常见原因是id与URL hash不严格匹配，大小写、空格、特殊字符等差异均导致失败；需确保ID唯一、DOM中已存在、CSS优先级足够，且避免框架条件渲染移除目标元素。
为什么 :target 样式不生效
最常见原因是页面中元素的 id 值与 URL 中的 hash（即 #xxx）不严格匹配——大小写、空格、特殊字符、前导/尾随空格都会导致失败。浏览器对 :target 的匹配是精确字符串比对，不忽略任何差异。
-
id="section-1"只能被#section-1匹配，#Section-1或#section_1都无效 - 动态生成的元素若未正确设置
id（比如漏了引号、含非法字符如!、@），:target无法关联 - 使用 JavaScript 修改
location.hash后，目标元素必须已存在于 DOM 中；若元素稍后才渲染（如 React 中条件渲染），:target不会“等待”或重触发
:target 选择器的适用范围和限制
:target 只作用于当前 URL hash 指向的**唯一一个**元素，且该元素必须有对应 id（不能用 name 属性替代）。它不支持伪类链式调用（如 :target:hover 无效），也不支持后代选择器直接穿透（:target .highlight 可以，但 .container:target .highlight 要求 .container 自身是 target）。
- HTML 中
FAQ必须对应name="faq"无效 -
:target不触发重排，但样式变更仍受 CSS 优先级影响——确保你的规则没有被更具体的 selector 覆盖 - 部分旧版 Safari（≤15.4）对动态插入的
id元素响应延迟，建议在插入后微任务中触发一次scrollIntoView()强制刷新状态
调试 :target 是否命中目标元素
打开开发者工具，在控制台执行 document.querySelector(':target')，返回 null 表示未匹配；返回元素则说明基础匹配成功，问题出在样式本身。
- 检查 computed styles 面板中是否出现你写的
:target规则，确认其未被 strike-through（被覆盖） - 临时加一条强制样式测试：
:target { outline: 2px solid red !important; }，排除 CSS 优先级干扰 - 注意：如果页面有多个相同
id（违反 HTML 规范），:target只会匹配第一个，其余忽略
React/Vue 等框架中 :target 失效的典型场景
单页应用常因路由切换不刷新页面，而 :target 依赖 hashchange 事件和 DOM 状态同步。当组件卸载后又通过 hash 导航回来，目标元素可能尚未挂载。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
:target实现核心交互逻辑——它更适合做视觉反馈（如高亮当前章节），而非控制显示/隐藏 - 在 React 中，可用
useEffect监听location.hash，手动添加 class；Vue 中可用watch: $route或onHashChange - 若坚持用
:target，确保目标元素在初始 render 就存在（哪怕display: none），避免条件渲染移除 DOM 节点
