details 展开后改背景色：details[open]

details 与 summary 组成原生折叠面板，无需脚本即可收起展开。展开状态下修改背景色，核心钩子是属性选择器 details[open]。

📌 步骤一：写出基础结构

<details>
  <summary>点击展开</summary>
  <p>这里是正文内容。</p>
</details>

默认收起时只有 summary 可见，展开后内部节点显示。

📌 步骤二：给展开态加背景

details[open] {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 12px;
}

details[open] 仅在展开时匹配，收起态不受影响。

📌 步骤三：只改内容区背景

details[open] > *:not(summary) {
  background-color: #e9ecef;
}

📌 步骤四：防移动端点击闪烁

部分浏览器点击 summary 会先触发焦点高亮再展开，给 summary 加 outline: none 或自定义 :focus-visible 即可。

📌 步骤五：防背景塌陷

内容含浮动或绝对定位元素时，展开瞬间背景高度计算可能滞后，给容器加 overflow: hidden 或 display: flow-root 约束格式化上下文。

收起与展开的过渡无法直接用 transition 作用于 height，需用 grid-template-rows 技巧或脚本辅助。