### [details 展开后改背景色：details[open]](https://www.huociguo.com/article/1878)

**Published:** 2026-10-04T03:22:48

**Author:** 米了

**Excerpt:** 与 组成原生折叠面板，无需脚本即可收起展开。展开状态下修改背景色，核心钩子是属性选择器 。 📌 步骤一：写出基…

![details 展开后背景变色示意](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-36747234.jpeg)

`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` 技巧或脚本辅助。

**Tags:** details 元素, details[open], HTML 状态钩子, 展开背景色, 折叠面板

**Categories:** HTML5

---