CSS :target 伪类不生效最常见的原因是 URL hash 与元素 id 不严格一致，需全等匹配（区分大小写、无空格、无编码差异），且元素须存在、唯一、已渲染、支持相关样式，并确保选择器语法正确、优先级足够。
CSS :target 伪类不生效，最常见的原因是 URL 中的 hash（#xxx）与页面中元素的 id 值不完全一致——大小写、空格、特殊字符、前后空格或拼写错误都会导致匹配失败。
检查 hash 和 id 是否严格一致
:target 匹配是**全等匹配**，区分大小写，且不允许多余空格或编码差异：
- URL 是
#section-1，对应元素必须是<div id="section-1">，不能是 <code>id="Section-1"或id="section_1" - 避免使用中文、空格或未编码的特殊字符（如
#标题一可能被浏览器转义为#%E6%A0%87%E9%A2%98%E4%B8%80，而id="标题一"不会自动编码，无法匹配） - 确保 ID 在整个页面中唯一，且没有被 JavaScript 动态修改过
- 元素尚未渲染完成（例如在 Vue/React 中延迟挂载），
:target样式不会回溯生效 - 元素设置了
display: none或visibility: hidden，虽不影响匹配，但可能让样式变化不可见 - ID 写在了自闭合标签（如
<img id="logo" alt="css:target锚点样式不生效怎么办_确保URL hash与元素ID匹配" >）上——可以匹配，但若想加背景色/内边距等样式，需确保该元素支持这些 CSS 属性（<img alt="css:target锚点样式不生效怎么办_确保URL hash与元素ID匹配" >默认是替换元素，padding有效，background需配合display: inline-block才可见） - 确保选择器写法正确，例如：
#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 变化
确认元素存在且可被 target 定位
以下情况会导致 :target 无法作用于目标元素：
验证 CSS 选择器优先级和语法
即使匹配成功，样式也可能被覆盖或写法有误：
立即学习“前端免费学习笔记（深入）”；
调试小技巧
快速定位问题：
