:target伪类锚点滚动不平滑因浏览器默认非平滑，需设html{scroll-behavior:smooth}；tab切换闪现因display触发回流，应改用visibility+opacity；id须合规（小写连字符），safari卡顿可优化href路径与简化过渡。
target伪类触发锚点滚动时页面跳动不平滑
默认行为下，:target 匹配元素会立刻滚动到视口顶部，没有过渡效果，视觉上像“闪”过去。这不是 bug，而是浏览器原生滚动行为未启用平滑模式。
解决方法很简单：在 html 或 body 上加一行 CSS：
html { scroll-behavior: smooth; }
注意两点：
-
scroll-behavior必须写在根元素（html）上才对:target生效；写在body上部分浏览器（如旧版 Safari）可能无效 - 该属性不支持 IE，但现代 Chrome/Firefox/Safari/Edge 均已稳定支持
- 如果页面已有 JS 控制滚动（比如
scrollIntoView），需确保没覆盖或重置该行为
用 :target + hidden 实现 Tab 切换时内容闪现或错位
常见写法是给每个 tab 面板设 display: none，再用 :target 显示对应面板，但容易出现「点击后内容短暂闪一下才显示」或「高度塌陷导致布局抖动」。
立即学习“前端免费学习笔记（深入）”；
根本原因是：CSS 选择器优先级和渲染时机问题，:target 匹配生效前，隐藏规则已执行，而浏览器尚未完成重排。
稳妥做法是用「显隐分离」策略：
- 所有面板默认设
visibility: hidden; position: absolute;（保留文档流占位或避免重排干扰） - 仅对
:target元素设visibility: visible; position: static; - 避免用
display切换，它会触发回流，且无法过渡 - 若需淡入，可叠加
opacity和transition，但注意visibility不支持过渡，必须配合opacity
锚点 ID 重复或特殊字符导致 :target 失效
浏览器只匹配第一个同名 id，且 id 值含空格、中文、点号（.）、冒号（:）等时，:target 可能完全不触发。
典型错误现象：#user-info 能匹配，#user.name 或 #用户面板 点击后 URL 变了，但样式无反应。
必须遵守 HTML5 id 规范：
- 只能以字母或下划线开头
- 后续字符可用字母、数字、连字符（
-）、下划线（_）、冒号（:）、点号（.）——但冒号和点号在 CSS 选择器中需转义，:target不支持转义写法，所以实际应避开 - 最安全做法：全小写 + 连字符分隔，如
tab-profile、section-faq
无 JS Tab 方案在 Safari 中切换卡顿或状态残留
Safari（尤其是 iOS 15–16）对 :target 的重绘优化较弱，快速连续点击不同 tab 时，可能出现「前一个 :target 样式未及时清除」或「滚动延迟半秒」。
这不是 CSS 写法问题，而是 Safari 渲染管线对哈希变更的响应节奏问题。缓解方式有限但有效：
- 确保每个 tab 链接的
href是完整路径+锚点，例如/page#tab-2，而非仅#tab-2（相对路径在某些 Safari 场景下触发 hash 更新不敏感） - 避免在
:target规则里写复杂动画或大量属性过渡，精简为opacity+visibility即可 - 如果必须兼容老 Safari，可加一行
body { will-change: scroll-position; }，强制开启合成层（副作用是内存略增）
这种方案的本质是用浏览器原语替代 JS 状态管理，越简单越稳。一旦开始加过渡、嵌套、多级联动，就该考虑是否真需要无 JS —— 很多时候，3 行 JS 比 20 行 hack 更可靠。
