FAQ 页面可用纯 CSS 实现展开收起交互，核心是使用原生 <details>+<summary> 标签，它语义清晰、可访问性强、无需 JavaScript，但不支持 IE；通过 ::marker 和 ::-webkit-details-marker 重置默认箭头，用 ::before 添加 ± 符号，结合 border-bottom 和负边距控制紧凑间距，移动端需扩大热区并适配可读性与操作性。
FAQ 页面的核心不是堆砌样式，而是让问题可折叠、答案能显隐、交互不卡顿、语义结构清晰——用纯 CSS 实现基础交互是可行的，但必须依赖 <details> + <summary>，否则就得引入 JS。
为什么不用 JavaScript 也能做展开收起
现代浏览器（Chrome 12+、Firefox 49+、Safari 6.1+、Edge 79+）原生支持 <details> 元素，它自带展开/收起状态和默认箭头，且天然可访问（支持键盘 Enter / Space 切换）。这是目前唯一无需 JS 即可实现语义化 FAQ 交互的 HTML 方案。
-
<details>默认收起，加open属性可默认展开 -
<summary>必须是<details>的第一个子元素，点击即触发切换 - 所有内容（除
<summary>外）自动被包裹在展开区域中，无需额外容器 - 不支持 IE，若需兼容 IE11 及更早版本，此方案不可用
如何用 CSS 覆盖默认箭头并控制样式
浏览器对 <summary> 的默认三角箭头是伪元素 ::marker 或 ::-webkit-details-marker 渲染的，不同内核写法不同。要统一控制，得分别重置，并用自定义图标替代。
summary {
list-style: none;
padding: 12px 24px 12px 40px;
position: relative;
cursor: pointer;
}
summary::marker {
content: "";
}
summary::-webkit-details-marker {
display: none;
}
summary::before {
content: "+";
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
font-weight: bold;
transition: transform 0.2s;
}
details[open] > summary::before {
content: "−";
}
details[open] > summary::before {
transform: translateY(-50%) rotate(0);
}
-
list-style: none是清除 Firefox 下的默认圆点或符号的前提 -
::marker在 Chrome/Firefox 中生效，::-webkit-details-marker专用于 Safari/旧版 Chrome - 用
::before插入 ± 符号比用字体图标更轻量，且无加载风险 - 动画仅作用于
transform，避免触发布局重排（left/width变更会引发重排）
怎么让多个 FAQ 条目垂直紧凑又留有呼吸感
直接给 <details> 设 margin-bottom 容易在展开时造成相邻条目跳动（因高度突变），更稳妥的方式是用 border-bottom 分隔 + 内部 padding 控制间距。
立即学习“前端免费学习笔记（深入）”；
details {
border-bottom: 1px solid #eee;
}
details:last-child {
border-bottom: none;
}
details > summary {
padding: 16px 24px 16px 48px;
}
details > *:not(summary) {
padding: 0 24px 24px;
margin-top: -1px;
}
-
margin-top: -1px是为了抵消border-bottom带来的视觉缝隙，让内容紧贴上一条的底边 - 所有非
<summary>子元素（即答案区域）统一设padding，避免漏掉多段<p>或<ul> - 不依赖
margin控制条目间距，可防止展开时页面抖动 - 若需悬停高亮，建议只作用于
summary，而非整个details，否则展开后鼠标移入答案区会意外触发 hover
响应式下怎么让 FAQ 更易操作
小屏设备手指点击精度低，需要扩大点击热区；同时默认箭头太小，必须放大或改用更明显的图标。另外，避免在移动端出现横向滚动。
- 把
summary的padding-left提高到60px左右，确保图标与文字之间有足够缓冲 - 用
@media (max-width: 768px)单独增大::before字体尺寸（如font-size: 20px） - 答案区域的
padding在移动端建议不小于16px，防止文字贴边 - 禁用
user-select: none—— 否则用户无法在答案中长按复制文本 - 如果答案含代码块或表格，务必加
overflow-x: auto和max-width: 100%防止溢出
真正难的不是让 FAQ 动起来，而是让每个 <details> 在屏幕阅读器里正确播报“已展开/已折叠”，以及确保焦点顺序不跳脱。这些靠 CSS 做不了，得靠 HTML 结构本身是否合规 —— 所以别删 <summary>，也别用 div 模拟它。
