details元素的开闭状态只能用:open伪类捕获，而非:hover、:active或:focus；:open是实时布尔状态选择器，与:checked类似，精准同步dom展开态，支持键盘操作和屏幕阅读器，而details[open]仅匹配html中硬编码的open属性，不响应用户交互后的状态变化。
details元素的开闭状态只能用:open捕获
不是:hover，也不是:active或:focus——这些伪类根本无法反映details是否真正展开。浏览器对details的开闭控制是独立的布尔状态，只有:open能准确匹配它。这个伪类和:checked行为一致：存在即生效，无需JS干预，且天然支持键盘（Space/Enter）和屏幕阅读器。
details:open与details[open]的区别在哪
两者视觉上可能一样，但语义和触发时机完全不同：
-
details[open]只在HTML中硬编码了open属性时才匹配，页面加载后哪怕用户手动收起，它依然生效 -
details:open是实时状态选择器，只在DOM当前处于展开态时才生效，用户点一下就切换，完全同步 - 写动画或交互逻辑时必须用
:open；仅做初始样式覆盖可考虑[open]，但容易误判状态
为什么summary:open会失效
summary本身没有:open伪类——这是常见误解。开闭状态属于details元素，summary只是它的子元素。正确写法必须带父级上下文：
- ✅
details:open summary—— 展开时修改标题样式 - ✅
details:open .content—— 展开时作用于内容区 - ❌
summary:open—— 语法错误，永远不匹配 - ⚠️
details:open > summary—— 看似合理，但summary必须是第一个子元素，用>反而限制过死，直接空格更稳妥
过渡动画卡顿？别碰height，改用max-height
details:open本身不提供动画能力，必须靠CSS过渡配合。但直接对height加transition会失败，因为高度从auto无法过渡。可靠解法是：
- 给内容容器（如
.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(-5px)起步，观感更自然
注意：Safari对max-height过渡支持稳定，但若内容高度变化极大，仍可能有轻微裁切，此时建议加padding-bottom兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
