details标签本身不渲染背景色，因其仅为语义容器；需分别设置summary和展开内容（如div或p）的background-color，并重置summary默认样式、移除原生箭头。

details 标签的 background-color 为什么设不上

直接给

写 background-color 常常没反应，不是 CSS 写错了，而是浏览器默认把背景“透”给了内部的

和内容区域——

本身不生成独立盒模型背景层，它只是个容器语义标签。真正需要设背景的是

和展开后的内容包裹层（比如

或

）。

如何分别控制 summary 和展开内容的背景色

必须拆开设置，不能指望一个规则覆盖全部：

• 元素要单独加 background-color，并建议加上 display: block 或 padding 来确保背景可见
• 展开后的内容（即
  的子元素，非
  ）需显式包裹一层
  或用子选择器定位，例如 details > *:not(summary)
• 若用 details[open] > p 这类选择器，注意它只在 open 状态生效；想让收起时也有底色，得额外写 details > p（但此时 p 默认不可见，背景仍不可见，所以更推荐包裹 div）

避免被默认样式干扰的关键 CSS 规则

浏览器对

有强默认样式（比如 margin、display: list-item），不重置就容易错位或背景被裁切：
• 必须加 summary { display: block; margin: 0; }，否则某些浏览器里背景左右留白或上下塌陷
• 移除原生箭头：用 summary::-webkit-details-marker { display: none; } 和 summary::marker { display: none; }，否则图标可能遮挡背景色
• 如果 summary 用了伪元素添加自定义图标（如 summary::after），记得给它设 pointer-events: none，否则点击图标区域无法触发展开

完整可复用的最小样式示例

以下代码能稳定控制两部分背景，且兼容现代浏览器：


Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
下载

details {
  border: 1px solid #ddd;
}
summary {
  background-color: #f5f5f5;
  padding: 12px 16px;
  cursor: pointer;
  display: block;
  margin: 0;
}
summary::-webkit-details-marker,
summary::marker {
  display: none;
}
details[open] > div {
  background-color: #fff;
  padding: 16px;
  border-top: 1px solid #eee;
}

注意：这里假设你把展开内容包在了

里。如果直接放
，就把选择器改成 details[open] > p，但要确认该
没有被其他样式设成 display: none 或 visibility: hidden——这是最常被忽略的“背景看不见”原因。