:target伪类是唯一兼顾纯CSS切换与SEO友好的方案，因其内容为真实DOM、语义清晰、可索引；但需手动处理初始hash或服务端渲染兜底，且必须用visibility+opacity过渡、确保ID合法唯一。
:target 伪类是唯一能兼顾纯 CSS 切换与 SEO 友好的方案，但它不自动处理初始状态，必须手动补全 hash 或服务端渲染兜底。
为什么 :target 是 SEO 友好的唯一选择
搜索引擎能直接抓取所有 id 对应的面板内容，无需 JS 渲染；每个面板都是真实 DOM 节点，语义清晰、可索引、可跳转。而 :checked 方案依赖隐藏的 <input> 和兄弟选择器（~），内容区块在 HTML 中位置靠后、结构割裂，部分爬虫可能忽略或降权。
-
:target面板始终在 DOM 流中，且与导航链接通过href="#id"显式关联，符合 HTML 锚点语义 -
:checked方案中，<div class="content1">等面板常被放在<input>后面很远的位置，破坏内容顺序，影响屏幕阅读器和 SEO 的上下文理解 - 所有面板默认可见（仅靠 CSS 隐藏），搜索引擎看到的是完整内容集合，不是“空容器 + JS 注入”
必须显式设置初始 hash，否则首屏无内容
页面加载时若 URL 没有 #xxx，:target 不匹配任何元素，所有面板都保持 display: none —— 用户看到白屏，SEO 也抓不到首屏主内容。
- 最简方案：服务端渲染时直接输出
location.hash = "#tab1"（JS）或在 HTML 中写<body onload="location.hash='tab1'"> - 更稳妥做法：服务端生成 HTML 时，让首个面板的
id出现在 URL 中，例如返回https://example.com/page#tab1 - 不能只靠 CSS 设置
.panel:first-of-type { display: block; }—— 这会与:target冲突，导致 hash 变化后旧面板未隐藏
:target 面板必须用 visibility + opacity 过渡，别碰 display
直接用 display: none / display: block 切换会导致布局重排（reflow），内容区域高度突变、文字跳动，影响可访问性和视觉稳定性。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
.panel { visibility: hidden; opacity: 0; transition: opacity 0.2s; }+.panel:target { visibility: visible; opacity: 1; } -
visibility保留占位，避免流式布局塌陷；opacity控制视觉显隐，支持平滑过渡 - 不要给
:target加height: auto或max-height动画 —— 它无法精确动画到自适应高度，容易卡顿或截断
锚点 ID 必须合法且全局唯一，否则 :target 失效
浏览器只对合法 fragment ID 触发 :target，常见失效原因全是 ID 命名或结构问题。
- ID 不能以数字开头（如
id="1tab"无效），推荐用id="tab-1"或id="tab1" - ID 不能含空格、中文、特殊符号（如
id="tab one"、id="tab@1"） - 确保每个
<a href="#xxx">的xxx与对应<div id="xxx">完全一致（大小写敏感） - 避免多个元素共用同一 ID —— 即使 CSS 生效，语义错误也会被 Lighthouse 标为严重可访问性问题
真正难的不是写出切换效果，而是让第一个 tab 在无 JS 的静态 HTML 里自然展开、搜索引擎能读到、屏幕阅读器能线性朗读——这三点全靠 ID 合法性、初始 hash 和 visibility/opacity 组合撑住，缺一不可。
