:target伪类生效需URL含#id且页面存在对应id元素，区分大小写；样式易被覆盖，建议用!important；滚动闪动可加scroll-margin-top或禁用transition；IE全系不支持。
target伪类怎么写才生效
必须确保 URL 中有 #id 片段，且页面存在对应 id 的元素，:target 才会匹配成功。它不认 class、不认 name 属性，只看 URL 片段和元素的 id 值是否严格一致（区分大小写）。
- 错误写法：
<div class="section"></div>+https://site.com/#section→ 不触发:target - 正确写法：
<div id="section"></div>+https://site.com/#section→ 匹配成功 - 注意空格和特殊字符：URL 里的
%20或中文编码，id值也得完全对应，否则失效
加亮边框时为什么没反应
常见原因是样式被覆盖或选择器权重不够。:target 是一个低优先级伪类，很容易被其他规则压住，尤其当目标元素本身有 border、outline 或 box-shadow 时。
- 务必用
!important强制生效（虽然不优雅，但最可靠）：div:target { border: 2px solid #007bff !important; } - 避免用通配符或太宽泛的选择器：
*:target在部分旧版 Safari 下不支持 - 如果目标是
<h2 id="title"></h2>，直接写h2:target比:target更精准，也更易调试
滚动到锚点后边框一闪就消失怎么办
这不是 :target 的问题，而是浏览器默认行为：锚点跳转会触发滚动，而某些 CSS 动画、transform 或 will-change 可能导致重绘异常，让边框视觉上“闪一下”。本质是渲染时机错位。
- 给目标元素加
scroll-margin-top（推荐）：h2:target { scroll-margin-top: 60px; }，避免顶部被遮挡引发反复重排 - 禁用过渡干扰：
h2:target { transition: none; }，防止已有transition规则影响边框显示 - 不要依赖 JavaScript 模拟
:target效果——那会失去原生锚点语义和浏览器前进/后退支持
兼容性要注意哪些老版本
:target 在 Chrome 1+、Firefox 1.5+、Safari 3.1+ 都支持，但 IE 全系不支持（包括 IE11）。如果你必须兼容 IE，就得换方案。
立即学习“前端免费学习笔记（深入）”；
- IE 下唯一可行的降级方式是监听
hashchange事件 + JS 切换 class：document.addEventListener('hashchange', () => { ... }) - 别用
CSS @supports (:target)做检测——它在所有支持:target的浏览器里都返回 true，无法区分是否真正生效 - 移动端 WebView（比如微信内置浏览器）基本没问题，但部分安卓 4.x 系统自带浏览器可能有渲染延迟，边框出现慢半拍
真正麻烦的不是怎么写对，而是当页面用了 position: sticky、contain: layout 或复杂 flex/grid 布局时，:target 的渲染表现会变得不可预测——这时候得靠 devtools 逐层关掉样式来定位干扰源。
