:target伪类通过url片段标识符（如#tab1）匹配对应id元素触发样式切换，需为每个面板设唯一id并用section:target动态覆盖自定义属性实现显隐控制，配合display/opacity/visibility组合确保布局与可访问性。
用 :target 配合 CSS 自定义属性控制选项卡显隐
纯 CSS 实现选项卡切换，核心是利用 URL 片段标识（#tab1）触发 :target 伪类，再通过自定义属性传递状态。自定义属性本身不触发重排，但必须配合选择器作用域才能生效——不能只定义 --active: 0 就完事，得让每个面板根据当前 :target 动态读取对应值。
常见错误是把自定义属性写在 :root 或父容器上，导致所有面板读到同一份静态值，切换后无响应。正确做法是把变量绑定到每个 <section id="tab1"></section> 元素自身，并在 section:target 时覆盖该变量。
- 给每个选项卡面板加唯一
id，如id="tab-details" - 在面板上声明初始自定义属性：
style="--active: 0" - 用
section:target { --active: 1 }覆盖当前目标项的值 - 用
section { display: var(--active, 0) == 1 ? block : none }不行——CSS 不支持表达式，得换思路
用 display + opacity + visibility 组合实现视觉切换
CSS 自定义属性不能直接参与逻辑判断，所以得靠它驱动已有的 CSS 属性。最稳妥的方式是结合 display 控制布局流，再叠加 opacity 和 visibility 做过渡效果。关键在于：不能只依赖 opacity，否则未激活面板仍占位、可聚焦、影响屏幕阅读器。
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
- 默认所有面板设为
display: none; opacity: 0; visibility: hidden; -
section:target同时设为display: block; opacity: 1; visibility: visible; - 若需淡入动画，给
section加transition: opacity 0.2s ease, visibility 0.2s（注意visibility无法真正过渡，但配合opacity可掩盖闪烁） - 不要用
max-height动画模拟展开——内容高度未知时容易错位或截断
用自定义属性统一管理颜色/边框等视觉状态
当选项卡头（tab header）也需要随激活状态变色或加下划线时，自定义属性就派上实际用场了。此时可以把状态“提一层”，比如在 body 上设置 --active-tab: "tab-details"，再用属性选择器匹配，但这样需要 JavaScript 更新——违背“无 JS”前提。更可行的是复用 :target 的级联能力。
- 把 tab header 写成
@#@#@#@#@#@#@#@#@#@0，面板为<section id="tab-details"></section> - 用
a[href="https://www.php.cn/link/d8271bfa91d4bf7230b832ea610afbbd"]:target ~ .tabs-nav a行不通——:target是作用在section上，不是a - 正确方式：把 header 和 panel 放进同一父容器，用
.tabs-container:has(section:target)（但:has()在 Safari 15.4+ 才稳定支持） - 兼容性兜底方案：放弃 header 样式联动，或接受仅用
:target控制面板，header 激活态由用户自行用a:visited或伪类模拟（有局限）
IE 和旧版 Safari 下的 fallback 策略
:target 在 IE8+ 和所有现代浏览器都支持，但自定义属性（--foo）在 IE 完全不支持，旧版 Safari（:has() 支持有限。如果必须兼容 IE，就别用自定义属性驱动样式，直接用 :target 控制所有 CSS 属性；如果只用自定义属性做主题色等非功能属性，可以放心降级——它们被忽略后不影响切换逻辑。
- 检查是否真需要自定义属性：若只是开关显隐，
:target足够，加自定义属性反而增加维护成本 - 若用于主题色，可在
:root定义默认值，再在section:target中覆盖，IE 用户看到默认色，无副作用 - 避免在关键路径（如
display、z-index）中依赖自定义属性，这些必须用原生属性直写
真正容易被忽略的是焦点管理：纯 CSS 切换后，激活面板不会自动获得焦点，键盘用户可能卡在旧 tab header 上。这不属于 CSS 能解决的范畴，但得心里有数——无 JS 方案天然缺失这部分体验。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
