target伪类怎么触发——锚点必须带#且页面存在对应id
:target 只在 URL 带锚点（如 #panel1）且页面中存在匹配的 id="panel1" 元素时生效。它不是监听点击，而是响应浏览器地址栏变化。
- 锚点链接必须写成
<a href="#panel1">Tab 1</a>，不能漏掉# - 对应面板必须有
id="panel1"，不能用class或其他属性代替 - 如果页面加载时 URL 就带
#panel2，:target会立刻作用于该元素，无需点击 - 单页应用（SPA）中若用 js 改变 URL 但未触发 dom 重排，
:target可能不更新（需确保 history.pushState 后浏览器真正“导航”到该锚点）
怎么让多个面板互斥显示——靠:target + 隐藏默认状态
纯 css 选项卡的核心是：所有面板默认隐藏，仅被 :target 选中的那个显示。
- 所有面板统一设
display: none - 再单独给
:target加display: block（或flex等） - 不要依赖
:not(:target)控制其他面板——它无法覆盖已显式的display，容易错乱
.tab-panel { display: none; } .tab-panel:target { display: block; }- 若用
visibility: hidden替代display: none，面板仍占布局空间，可能影响滚动或父容器高度 - 某些旧版 safari 对
:target在display: contents下支持不佳，避免混用
为什么点击后没反应——检查URL、id、CSS优先级三处硬伤
常见失效不是语法错，而是三个地方卡住：
-
浏览器地址栏没变：确认链接是
<a href="#xxx"></a>，不是javascript:void(0)或阻止了默认行为立即学习“前端免费学习笔记（深入）”；
-
页面找不到对应
id：注意大小写、空格、特殊字符（id="my-tab-1"和href="#my-tab-1"必须完全一致） -
CSS 被覆盖：
:target优先级和普通类选择器一样，如果前面有.tab-panel { display: block !important; }，:target就赢不了 -
chrome DevTools 的 Elements 面板里，直接看目标元素上是否高亮显示
:target规则生效 -
移动端 Safari 有时对 fragment 更新有延迟，可加
scroll-margin-top避免锚点滚动后被顶部遮挡
能不能做过渡动画——可以，但只能动 :target 元素自身，且得用 visibility + opacity
:target 是状态伪类，不能直接触发动画，但可以配合 opacity 和 visibility 实现淡入。
-
不能对
display做 transition（它是不可动画属性） -
正确组合是：
visibility: hidden; opacity: 0;→:target { visibility: visible; opacity: 1; transition: opacity 0.2s; } -
注意：
visibility切换不会触发布局重排，比display更适合动画场景 -
如果面板内容高度不一，仅靠
opacity会导致下方内容“上跳”，需额外用max-height或height过渡（但要预设高度值，不适用于动态内容） -
firefox 对
:target+transition的初始渲染偶尔有闪动，加will-change: opacity可缓解
锚点跳转本身会触发页面滚动，这是浏览器原生行为，无法用 CSS 关闭；如果不想滚，就得换方案——比如用 radio + :checked，但那就不是 :target 了。