details标签默认箭头无法用color控制，因其由浏览器内置的::marker或::-webkit-details-marker伪元素渲染，仅部分支持color和content属性，需分浏览器兼容处理并优先使用css变量统一管理。
details标签默认箭头为什么不能用color控制
因为summary前面那个小三角是浏览器内置的::marker伪元素，不是文字也不是普通图标，它不响应color、font-size这些文本属性，直接写color: red完全无效。
真正起作用的是::marker（在支持它的浏览器里）或::-webkit-details-marker（旧版Chrome/Safari），但两者行为不一致，必须分开处理。
- Firefox 79+ 支持标准
::marker，但只允许设置content和color - Chrome/Edge 85+ 开始逐步支持
::marker，但早期版本仍需::-webkit-details-marker - Safari 直到 18.0 才完整支持
::marker，之前必须靠::-webkit-details-marker
如何用::marker统一替换箭头图标
最稳妥的做法是先隐藏原生标记，再用summary::before插入自定义内容。但如果你只想改颜色或简单替换，可以用::marker配合content：
details summary::marker {
content: "▶";
color: #3b82f6;
}
<p>/<em> 折叠时显示右向三角，展开时旋转 </em>/
details[open] summary::marker {
content: "▼";
}</p>
注意：content只能是字符串或none，不能用url()或attr()；color仅影响字符颜色，对SVG图标无效。
::-webkit-details-marker兼容写法要加all: unset
在Chrome/Safari老版本中，::-webkit-details-marker默认带内边距和垂直对齐，直接设color会偏位。必须先重置样式：
details summary::-webkit-details-marker {
all: unset;
content: "▸";
color: #10b981;
font-size: 1em;
display: inline-block;
transform: translateY(-1px);
}
-
all: unset是关键，否则content可能不生效 -
transform: translateY(-1px)用来微调基线对齐，不然三角常比文字高 - 不要用
margin或padding调整位置，容易触发布局抖动
展开/折叠状态联动时避免重复渲染
用details[open]切换::marker内容时，部分浏览器（如旧版Edge）会在DOM更新后闪一下。更稳的方式是用CSS变量驱动：
details summary {
--marker: "▶";
}
details[open] summary {
--marker: "▼";
}
details summary::marker {
content: var(--marker);
}
这样避免重复声明伪元素规则，也方便后续扩展成SVG图标或动画。不过得记住：所有::marker样式都必须写在summary选择器之后，否则会被覆盖。
真正麻烦的不是怎么换箭头，而是不同浏览器对content字符串的渲染精度——比如“▶”在某些缩放比例下会糊，换成Unicode“>”又不够对称。这种细节没报错，但上线后才发现不对劲。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
