details标签需用:open伪类而非:hover控制展开态，因其是专用于捕获开闭状态的布尔选择器；配合max-height过渡、隐藏原生箭头并自定义图标，可实现零JS、无障碍的平滑交互效果。
details 标签配合 CSS 状态伪类，能实现真正原生、零 JavaScript 的交互效果。关键不是靠:hover或:active，而是用:open这个专为它设计的状态选择器——它直接响应浏览器内置的展开/收起行为，语义清晰、可访问性强，且天然支持键盘操作（Enter/Space）和屏幕阅读器。
用 :open 精准捕获展开状态
details 元素的开闭由浏览器控制，:hover 只管悬停，无法感知状态变化。只有 :open 是布尔型状态伪类，类似 :checked，只在元素实际处于展开态时生效：
-
details:open→ 控制整个容器样式，比如加背景色或边框 -
details:open summary→ 调整标题文字颜色、字体粗细或图标方向 -
details:open .content→ 专门作用于展开后的内容区域，用于动画或排版增强
自定义 summary 图标与点击反馈
默认箭头不美观，也难控制。先清除原生标记，再用伪元素添加可控图标：
- 用
summary::-webkit-details-marker和summary::marker隐藏默认箭头 - 通过
summary::after插入 ▼ 或 +，再用details:open summary::after切换为 ▲ 或 − - 注意选择器写法：必须是
details:open summary > .icon，不能写summary:open .icon（summary 没有 :open 伪类） - 避免给 summary 设
pointer-events: none，否则 :open 永远不会触发
让内容展开有过渡动画
:open 本身不带动画，但可以配合 transition 实现视觉平滑感。难点在于 height 无法过渡，得换思路：
立即学习“前端免费学习笔记（深入）”；
- 对内容区（如
.content）设max-height: 0+overflow: hidden - 在
details:open .content中设max-height: 300px（需预估最大高度） - 同时加
transition: max-height 0.3s ease, opacity 0.2s ease - 配合
opacity和transform: translateY()做辅助动效，观感更自然
保持可访问性与兼容性底线
原生 details 的优势就在无障碍支持，美化时别破坏它：
- 确保 summary 始终是 keyboard-focusable，不要用
tabindex="-1"或outline: none无替代方案 - 用
:focus-visible区分鼠标与键盘焦点，提升键盘用户体验 - Safari 对
max-height过渡支持稳定，Chrome 115+ 可尝试animation，但建议统一用 transition - 避免在 summary 内部嵌套复杂交互组件（如按钮、链接），可能干扰 toggle 行为
