details[open]是最可靠的状态钩子，用于控制展开时背景色；可统一设置details[open]{background-color:#f8f9fa}或仅内容区details[open]>*:not(summary){background-color:#e9ecef}；需防移动端点击闪烁及背景塌陷问题。
details展开时如何用CSS控制背景色
直接给 details 或其子元素设 background-color 就能生效，但关键在于“什么时候生效”——details 本身不带状态类，必须靠 :has() 或结构选择器区分展开/收起状态。现代浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）已支持 details:has(> summary:not([open])) 这类写法，但更稳妥的是用 details[open]。
details[open] 背景色设置的实操要点
details[open] 是最可靠的状态钩子，它只在用户点击后、内容真正可见时匹配。注意它不是伪类，而是属性选择器，所以兼容性比 :has() 更广（IE 不支持，但 IE 已淘汰）。
- 想整个折叠区域（含
summary和内容区）统一背景色：直接写details[open] { background-color: #f8f9fa; } - 只想展开后的内容区变色（不包括
summary）：用details[open] > *:not(summary) { background-color: #e9ecef; } - 如果内容区用了
padding或border，记得把background-color加在包裹它的直接子元素上，否则可能被父级透明背景透出
移动端点击时背景色闪烁怎么破
在 iOS 和部分 Android 浏览器中，summary 点击瞬间会触发浏览器内置的触摸高亮（类似 -webkit-tap-highlight-color），导致你设的背景色短暂闪一下白或灰。这不是你代码写错了，是浏览器行为。
- 最轻量解法：给
summary加cursor: unset;，这个 trick 能抑制高亮触发 - 补一刀更稳：加
summary { -webkit-tap-highlight-color: transparent; } - 别用
:active覆盖——它无法抢在浏览器高亮之前生效
为什么 background-color 有时“看不见”
常见错觉是“我写了 details[open] { background-color: red; }，但没变色”。其实往往是因为：
-
details默认是display: block，但内部没有高度撑开，尤其当内容为空或只有内联元素时，背景就“塌陷”了 - 你改的是
details的背景，但真正渲染内容的是summary后面的兄弟元素（比如p或div），它们没设背景，还是透出父级或 body 的颜色 - 用了
rgba()或hsla()却忘了 alpha 值太小，看起来像没生效 - CSS 优先级被框架（如 Bootstrap）的
body { background: transparent; }意外覆盖
调试时先写死 details[open] { background-color: lime !important; }，确认是否命中规则，再逐步还原设计值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
