必须通过summary选择器设置字体大小和颜色，details自身不渲染文字；推荐使用details > summary { color: #2e7d32; font-size: 1.1rem; }，注意避免内联样式和无效继承。
details 标签的字体大小和颜色不能直接用 details 元素自身控制
因为 details 是语义化容器，本身不渲染文字；真正显示的标题文字来自其子元素 summary。所以改样式必须作用在 summary 上，而不是 details。
常见错误现象：写 details { font-size: 18px; color: red; } —— 完全无效，浏览器根本不把字体属性继承给内部文本，除非显式选中 summary。
- 必须用
summary选择器（或更具体如details > summary）才能生效 -
summary默认是display: list-item，带原生小箭头，修改字体不会影响折叠行为 - 若想连箭头一起定制，需用
summary::marker单独处理，但字体/颜色设置仍得走summary
用 CSS 修改 summary 的字体大小和颜色最稳妥
推荐写法是通过外部 CSS 或 块统一控制，避免内联 style 堆砌：
details > summary {
color: #2e7d32;
font-size: 1.1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}
注意点：
-
font-size用rem或em更安全，避免父级缩放时失真；px也可，但响应式场景下弹性差 -
color别写成color: "#2e7d32"—— 引号是非法的，CSS 里值不加引号（十六进制、颜色名、函数都如此） - 如果页面有多个
details，且需要差异化样式（比如警告类用红色），建议加 class：危险操作
....warning summary { color: #d32f2f; }
内联 style 能用，但只适合临时调试
虽然不推荐，但 summary 支持内联样式，写法和其他标签一致：
<details><summary style="color: #1976d2; font-size: 16px;">点击展开说明</summary><p>这里是详细内容…</p> </details>
风险提示：
- 一旦复制粘贴多次，
style="color: #1976d2"散落在 HTML 里，后期换主题色要手动全局搜索替换 - 如果同时用了外部 CSS 规则，内联样式优先级最高，容易掩盖本意——比如你写了
summary { color: #333; }，但某处内联写成style="color: blue"，结果就是蓝色，还不好定位 - 别试图在
details标签上写style来“影响”summary，它不会继承字体相关属性（color和font-size默认不继承，除非显式声明inherit）
折叠/展开状态下的样式区分很实用，但别漏掉 :not([open])
用户常想让关闭状态的 summary 显示灰色，展开后变深色——这靠属性选择器就能实现：
details > summary:not([open]) {
color: #757575;
}
details > summary[open] {
color: #1a237e;
font-weight: 600;
}
关键细节：
- 必须用
:not([open])，不是:closed（该伪类不存在） -
[open]是布尔属性，只要存在就匹配，不用写[open="open"] - 这种写法对可访问性友好，屏幕阅读器仍能正常播报状态，不影响语义
- 如果用了 JS 动态切换
open属性，CSS 会实时响应，无需额外监听
实际改的时候，最容易被忽略的是：你改的到底是不是 summary，而不是 details；以及是否在多个上下文（比如嵌套、第三方组件包裹）里被更高优先级的 CSS 覆盖了。打开开发者工具，直接选中那个小标题文字，看 computed styles 里 color 和 font-size 最终从哪条规则来，比猜快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
