必须手动用伪元素重绘箭头图标才能换色，因原生::marker兼容性差且不支持color控制；需隐藏原生标记后通过summary::after添加svg或字符图标，并用currentcolor实现颜色同步与transition动画。
details[open] summary::after 怎么换颜色
直接用 details[open] summary::after 选中展开时的伪元素，再设 color 或 fill（如果是 SVG 内联图标）就行。但要注意：浏览器默认箭头是 ::marker，不是 ::after，所以你得先自己用伪元素画图标，否则换不了色。
常见错误是写了 details[open] summary::marker { color: red; } —— 这在 Firefox 可能生效，但在 Chrome 和 Safari 基本无效，因为 ::marker 兼容性差，且不支持 color 控制原生小三角颜色（它只响应系统主题）。
- 必须手动用
summary::before或summary::after添加图标，比如content: "▼";或内联 SVG - 确保
summary是 inline 元素（默认就是），否则::after可能不显示 - 如果用了
display: flex，记得给summary::after加margin-left或align-self对齐，不然图标会跑偏 - 颜色值建议用
currentColor，这样能自动继承summary的文字色，避免硬编码
为什么 summary::marker 换色经常失效
summary::marker 在 Chrome 里根本不能设 color，Safari 15.4 以下不支持该伪元素，Firefox 虽支持但只允许 content 和 display，color 会被忽略。这不是你写错了，是浏览器根本不让动原生标记的颜色。
真正可控的路径只有一条：干掉原生标记，自己画。
- 先隐藏：
summary::-webkit-details-marker { display: none; }+summary::marker { display: none; } - 再重绘：用
summary::after { content: "▶"; color: #3b82f6; transition: color 0.2s; } - 展开时旋转+变色：
details[open] summary::after { content: "▼"; color: #10b981; transform: rotate(90deg); }（注意要加transition）
SVG 图标怎么同步换色
如果 summary::after 里塞的是内联 SVG，比如 content: url("data:image/svg+xml,...");，那 color 不起作用——SVG 里的 fill 是硬编码的。得用 fill="currentColor" 才能响应父级文字色。
- 正确写法示例：
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M8.225 15.375l-4.26-4.26a.75.75 0 010-1.06l4.26-4.26a.75.75 0 111.06 1.06L6.06 9h11.88a.75.75 0 110 1.5H6.06l3.235 3.235a.75.75 0 11-1.06 1.06z'/%3E%3C/svg%3E"); - 这样
details[open] summary::after改color，SVG 的fill就跟着变 - 别用 base64 编码 SVG，URL 编码更轻量、可读性更强，也更容易调试
transition 动画卡住或没反应
颜色变化本身是 CSS 属性动画，不需要 JS，但如果你同时改了 transform（比如旋转箭头）和 color，却只写了 transition: color .2s，那旋转就不会动。
- 要么写全：
transition: color .2s, transform .2s; - 要么偷懒用：
transition: all .2s;（仅限调试，生产环境慎用） - 确保
summary::after没被设成display: none或opacity: 0，否则过渡起点就不可见 - Safari 对
content切换的 transition 支持不稳定，优先用transform+color组合，别依赖content动画
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
