details[open] 是唯一可靠的状态钩子，需配合 list-style: none、position: relative 和 content: "" 才能正确控制 summary 伪元素的展开/收起图标及定位。
details[open] 选择器是控制伪元素状态的关键
直接用 details 或 summary 写 ::before/::after 只能定义默认样式；真正要区分“展开”和“收起”两种视觉状态，必须依赖 details[open] 这个属性选择器。它不是可选的过渡技巧，而是唯一可靠的 DOM 状态钩子。
-
summary::before定义初始图标（比如content: "▸"） -
details[open] summary::before覆盖为展开态图标（比如content: "▼"或加transform: rotate(180deg)） - 漏掉
[open]就等于只写了静态样式，无法响应用户点击
summary::before 必须配 list-style: none
summary 是浏览器内置的可折叠控件，默认带原生三角箭头（list-style），这个箭头会和你写的 ::before 图标重叠甚至打架。不显式清除，就会出现两个箭头并存、错位或闪烁。
- 必须写
details > summary { list-style: none; }，否则自定义图标大概率被遮挡或布局异常 - 仅对
summary设display: block或position: relative不够——原生样式优先级高，得靠list-style: none主动关掉 - 某些旧版 Safari 在未清除时还会触发奇怪的点击区域偏移
伪元素图标定位依赖 summary 的 position 上下文
summary::after 如果设了 position: absolute 却没对齐，八成是因为 summary 没设 position: relative。伪元素的绝对定位永远找最近的「非 static 定位祖先」，而 summary 默认是 position: static。
- 务必加
summary { position: relative; }，这是让图标停在文字右侧/右侧边缘的前提 - 用
right: 8px+top: 50%+transform: translateY(-50%)垂直居中，比硬写top: 12px更适配不同字号和缩放 - 记得给
summary加padding-right，否则文字可能被伪元素覆盖，尤其在小屏或大字体模式下
content 属性不能省，空字符串也要写
写了 summary::after { content: ""; } 才算真正启用伪元素；如果完全删掉 content，哪怕后面跟了一堆 background、width、height，整个伪元素都不会渲染——连盒模型都不生成。
-
content: ""是最安全的占位写法，后续可用background-image或border画图标 - 用
content: attr(data-icon)读取 HTML 属性时，属性名拼错或值为空，会导致图标消失且无报错提示 - 老版 Safari 对
content: url(./arrow.svg)渲染不稳定，真机测试比 DevTools 预览更可信
最容易被忽略的是：伪元素无法携带语义，也不能被屏幕阅读器识别。哪怕你把“常见问题”四个字用 ::before 插进 summary，视障用户也听不到——这部分信息必须保留在 HTML 文本内容里，伪元素只负责视觉装饰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
