CSS变量不能控制details的open状态，因:open是伪类而非属性；但可安全用于颜色、间距、图标旋转、动画时长等静态样式，需在:open选择器内部使用，不可替代状态判断。
details标签的样式为什么不能直接用CSS变量控制open状态
:open 是伪类，不是属性，它本身不接收值，所以你不能用 --is-open 这类 CSS 变量去“驱动”展开逻辑。浏览器只认 details[open] 或 details:open 这种状态匹配，变量无法参与状态判断。想靠 style="--is-open: true" 触发样式变化？不行——那只是存了个字符串，:open 根本看不到它。
哪些样式可以用CSS变量安全替换
颜色、间距、图标内容、动画时长这些静态视觉参数，完全可以交给 CSS 变量管理。关键是要把变量用在 :open 选择器内部，而不是试图让它替代状态本身。
-
--summary-color：用于details:open summary的文字色或边框色 -
--panel-padding：控制details:open .content的内边距 -
--icon-rotate：配合transform: rotate(var(--icon-rotate))实现箭头旋转 -
--anim-duration：统一控制max-height和opacity的过渡时间
示例：
details {
--summary-color: #1e40af;
--panel-padding: 1rem;
--anim-duration: 0.25s;
}
details:open summary {
color: var(--summary-color);
}
details:open .content {
padding: var(--panel-padding);
transition: max-height var(--anim-duration) ease, opacity var(--anim-duration) ease;
}
用变量控制图标内容要避开的坑
content 属性支持 var()，但 Safari（截至 2026 年 8 月）对 content: var(--icon) 在 ::after 中的支持不稳定，尤其在 :open 切换时可能不重绘。更稳妥的做法是把变量值写死在选择器里，或者用两个独立的 ::before/::after 分别定义收起/展开态。
立即学习“前端免费学习笔记（深入）”；
- ❌ 不推荐：
details summary::after { content: var(--icon-closed); }+details:open summary::after { content: var(--icon-open); }（Safari 可能卡住） - ✅ 推荐：
summary::after { content: "▶"; }+details:open summary::after { content: "▼"; }，把符号硬编码，变量只管颜色或旋转 - ⚠️ 若必须用变量，确保在 :root 或 details 上声明，并在所有相关伪元素中显式继承
动态高度动画里变量怎么用才不翻车
max-height 动画依赖固定像素值，而 var(--max-height) 如果设为 fit-content 或 auto，transition 就会失效。变量只能用来存预估的像素上限，比如 --max-height: 400px，不能指望它“自动适应”。
- 初始态：
.content { max-height: 0; overflow: hidden; } - 展开态：
details:open .content { max-height: var(--max-height); } - 必须同时加：
transition: max-height var(--anim-duration) ease，否则变量再准也没动画 - 真实内容超了怎么办？变量值得留余量，或改用 JS 测量后 inline 覆盖该变量（此时变量只作 fallback）
真正难的不是变量怎么写，而是你得清楚哪些地方变量能插手、哪些地方它只能旁观——状态逻辑永远在浏览器手里，变量只是你调色盘上的一支笔，画得再好，也不能替画布决定要不要展开。
