::marker 是唯一可靠方式自定义 summary 箭头图标，需双写兼容旧内核；必须设 display: block 保证样式生效；禁用 flex/absolute 防交互失效；焦点与键盘操作不可破坏；图标须保留语义。
summary::marker 是唯一可靠的方式改箭头
直接写 summary { color: red; } 可能生效，但改图标必须用 ::marker——它专为这个场景设计，且随 font-size 缩放、居中对齐、不破坏热区。旧版 Safari 和 Firefox 不支持，所以得双写：
-
summary::-webkit-details-marker { content: none; }覆盖 Chrome/Safari 旧内核 -
summary::marker { content: "▸"; color: #007bff; }覆盖现代标准（Chrome ≥125、Firefox ≥129、Safari ≥15.4） - 别用
display: none或visibility: hidden—— 这会让屏幕阅读器丢失状态提示 - 如果只想要文字没图标，用
content: "";+padding-left: 0;微调间距
summary 文字样式生效的前提条件
字体、颜色、背景这些基础样式不是总能如预期工作，因为浏览器默认把 summary 渲染为 display: list-item，导致某些盒模型属性被 UA 样式压制：
- 必须显式设
summary { display: block; }或inline-block，否则padding和background在部分浏览器下无效 -
details[open] summary可单独选中展开态标题，适合加下划线或变色 - 避免在
summary里嵌套<div> 或 <code><p></p>—— 语义错误，且会触发浏览器降级为 inline 渲染，样式全乱 - Firefox 对
line-height支持不稳定，建议用padding控制垂直居中 - 别给
summary设display: flex或position: absolute—— 这会让部分浏览器丢失焦点状态和Enter/Space响应 - 显式写
tabindex="0"更稳，哪怕浏览器默认加上了 - 用
outline: 2px solid #007aff; outline-offset: 2px;做焦点样式，别只靠box-shadow - 移动端加
touch-action: manipulation;防 iOS Safari 300ms 延迟 - 监听状态变化优先用
details.addEventListener('toggle', ...)，比click更准确 - 用
@supports (display: list-item)做特性检测，渐进增强而非强制覆盖 - 不要依赖
summary:focus-visible—— 多数浏览器至今没实现 - 若必须兼容旧版，用
summary::before模拟图标：设display: inline-block、margin-right、transition，并配合details[open] summary::before做旋转动画 - 所有自定义图标必须保留语义含义（比如 “▶” 表示可展开，“▼” 表示已展开），不能纯靠颜色区分状态
点击区域和键盘交互不能被 CSS 破坏
很多自定义样式会让 summary 点击失效或键盘不可操作，根本原因常是无意中干扰了原生交互逻辑：
兼容旧环境时的降级方案
IE 完全不支持 details/summary，Safari ≤15.3 不支持 ::marker，这时候不能硬上新特性：
