CSS :target 伪类不生效最常见的原因是 URL hash 与元素 id 不严格一致，需全等匹配（区分大小写、无空格、无编码差异），且元素须存在、唯一、已渲染、支持相关样式，并确保选择器语法正确、优先级足够。
CSS :target 伪类不生效，最常见的原因是 URL 中的 hash（#xxx）与页面中元素的 id 值不完全一致——大小写、空格、特殊字符、前后空格或拼写错误都会导致匹配失败。
检查 hash 和 id 是否严格一致
:target 匹配是**全等匹配**，区分大小写，且不允许多余空格或编码差异：
- URL 是
#section-1，对应元素必须是，不能是id="Section-1"或id="section_1"- 避免使用中文、空格或未编码的特殊字符（如
#标题一可能被浏览器转义为#%E6%A0%87%E9%A2%98%E4%B8%80，而id="标题一"不会自动编码，无法匹配）- 确保 ID 在整个页面中唯一，且没有被 JavaScript 动态修改过
确认元素存在且可被 target 定位
以下情况会导致
:target无法作用于目标元素：- 元素尚未渲染完成（例如在 Vue/React 中延迟挂载），
:target样式不会回溯生效 - 元素设置了
display: none或visibility: hidden，虽不影响匹配，但可能让样式变化不可见 - ID 写在了自闭合标签（如
padding有效，background需配合display: inline-block才可见）
验证 CSS 选择器优先级和语法
即使匹配成功，样式也可能被覆盖或写法有误：
立即学习“前端免费学习笔记（深入）”；
- 确保选择器写法正确，例如：
#my-section:target { background: #ffeb3b; }✅，而不是:target#my-section❌（顺序错误） - 检查是否有更高优先级的规则覆盖了
:target样式（如内联样式、!important、或更具体的选择器） - 不要遗漏冒号 —— 写成
target（无冒号）或::target（双冒号，错误）都不生效
调试小技巧
快速定位问题：
- 在控制台执行
document.getElementById(location.hash.slice(1))，看是否返回对应元素 - 临时加一条通用样式测试：
:target { outline: 2px solid red !important; }，排除样式本身不可见的问题 - 用浏览器地址栏手动输入完整 URL（含 hash），刷新页面，避免 SPA 路由拦截 hash 变化
- 避免使用中文、空格或未编码的特殊字符（如
