直接用 :has() 做手风琴会失败，因其要求触发控件（如 .toggle）必须是 .accordion-item 的内部子元素，否则无法匹配；且仅支持 safari 15.4+ 和 chrome 105+，firefox 不支持，需用 @supports 降级处理。
为什么直接用 :has() 做手风琴会失败
:has() 是个强大的父选择器，但它不支持“自身状态变化触发父级样式”这种循环逻辑。比如你写 .accordion-item:has(.toggle:checked)，看似能控制展开，但实际中 .toggle 通常是个隐藏的 <input type="checkbox">，而它本身不在 .accordion-item 内部——它可能在外部、兄弟位置，甚至被包裹在别的容器里。这时 :has() 就查不到，样式根本不会生效。
常见错误现象：
- 点击后无反应，DOM 结构没变，但 CSS 没匹配上
- 展开/收起动画卡顿或不触发，因为
:has()不监听 checked 变化（它只做一次性匹配） - 在 Safari 15.4+ 和 Chrome 105+ 才可用，Firefox 目前（2024）仍不支持，需检查兼容性
必须把 <input> 放进 :has() 的目标父元素内部
这是能跑通的唯一前提：让 :has() 的宿主元素真正“包含”触发控件。否则所有样式规则都无效。
使用场景：
-
.accordion-item必须是<input class="toggle">的直接或间接父级 -
.content必须是.accordion-item的子元素（不能跨层级、不能用~或+选兄弟）
实操建议：
- 把
<input type="checkbox" class="toggle">放在.accordion-item最开头，紧贴标签或标题旁 -
.content跟在.toggle后面，同级嵌套，别用绝对定位或脱离文档流 - 不要用
label[for]跨元素关联，必须用<label for="id"></label>+<input id="id">同一父容器内，否则:has()匹配不到
示例结构（有效）：
<div class="accordion-item"> <input type="checkbox" class="toggle" id="item1"><label for="item1">标题</label> <div class="content">内容区</div> </div>
:has() 配合 max-height 实现平滑收展动画
纯 CSS 动画依赖可过渡属性，height: auto 无法过渡，所以得用 max-height 模拟。但这个值必须足够大，否则内容会被截断；也不能过大，否则动画时间拉得太长。
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
参数差异：
-
max-height: 0对应收起态，overflow: hidden必须同时设置 - 展开态设为一个安全上限，比如
max-height: 500px（根据内容预估，一般 3–5 行文本够用） - 过渡用
max-height 0.3s ease-in-out，比opacity更符合手风琴直觉
性能影响：
-
max-height过渡在内容高度突变时可能有轻微闪烁（尤其字体加载延迟），建议加font-display: swap - 不要对多个
.accordion-item同时 toggle，:has()不触发重排优化，连续操作可能卡顿
实操建议：
- 给
.content加box-sizing: border-box，避免 padding 影响高度计算 - 若内容含图片，用
img { display: block; max-width: 100%; }防止撑出容器 - Safari 对
max-height过渡支持稳定，Chrome 没问题，Firefox 不支持:has()→ 整块失效，得降级
Firefox 用户看到的是静态列表，必须提供降级方案
没有 JavaScript，就无法动态插入 fallback 逻辑，所以得靠 CSS 特性查询兜底。
容易踩的坑：
- 误以为
@supports selector(:has())能区分浏览器，但 Firefox 当前完全忽略该规则，不报错也不执行 - 直接写
.accordion-item .content { max-height: 500px; }会导致 Firefox 下永远展开，失去交互性
正确做法：
- 默认状态设为收起（
.content { max-height: 0; overflow: hidden; }） - 仅在支持
:has()的浏览器里启用展开逻辑：@supports selector(:has(*)) { .accordion-item:has(.toggle:checked) .content { max-height: 500px; } } - 同时给
.toggle加position: absolute; opacity: 0; pointer-events: none;，再用label触发，保证视觉和可访问性不丢
复杂点在于：你得接受 Firefox 用户无法交互，或者主动加一层 JS 检测并注入 polyfill ——但那就违背“无 JavaScript”的前提了。所以真实项目中，要么放弃 Firefox 支持，要么接受它显示为静态 FAQ 列表。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
