details标签本身不渲染背景色，因其仅为语义容器；需分别设置summary和展开内容（如div或p）的background-color，并重置summary默认样式、移除原生箭头。
details 标签的 background-color 为什么设不上
直接给 <details> 写 background-color 常常没反应，不是 CSS 写错了，而是浏览器默认把背景“透”给了内部的 <summary> 和内容区域——<details> 本身不生成独立盒模型背景层，它只是个容器语义标签。真正需要设背景的是 <summary> 和展开后的内容包裹层（比如 <p> 或 <div>）。
如何分别控制 summary 和展开内容的背景色
必须拆开设置，不能指望一个规则覆盖全部：
-
<summary>元素要单独加background-color，并建议加上display: block或padding来确保背景可见 - 展开后的内容（即
<details>的子元素，非<summary>）需显式包裹一层<div>或用子选择器定位，例如details > *:not(summary) - 若用
details[open] > p这类选择器，注意它只在 open 状态生效；想让收起时也有底色，得额外写details > p（但此时 p 默认不可见，背景仍不可见，所以更推荐包裹 div）
避免被默认样式干扰的关键 CSS 规则
浏览器对 <summary> 有强默认样式（比如 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，否则点击图标区域无法触发展开
完整可复用的最小样式示例
以下代码能稳定控制两部分背景，且兼容现代浏览器：
立即学习“前端免费学习笔记（深入）”；
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;
}
注意：这里假设你把展开内容包在了 <div> 里。如果直接放 <p>，就把选择器改成 details[open] > p，但要确认该 <p> 没有被其他样式设成 display: none 或 visibility: hidden——这是最常被忽略的“背景看不见”原因。
