summary标签默认样式改不动，因浏览器强封装其为display:list-item并依赖::marker伪元素控制图标，普通css选择器无法穿透；需用summary::marker{content:"▸"}等精准定制，避免display:none破坏可访问性，同时确保键盘操作（enter/space）仍可触发展开。

summary 标签默认样式为什么改不动

直接写 summary { color: red; } 通常无效，因为浏览器对 summary 的默认样式做了强封装（尤其在 details 内部），部分 CSS 属性（比如 display、margin）会被 UA 样式覆盖或受限。更关键的是：Chrome / Edge 默认把 summary 渲染为 display: list-item，且自带伪元素 ::marker 控制小三角，普通选择器无法穿透。

用 ::marker 修改折叠图标和文字对齐

::marker 是目前最可靠的方式，用来定制小三角的形状、颜色、位置，同时避免破坏可访问性（屏幕阅读器仍能识别展开状态）：

summary::marker {
  content: "▸";
  color: #007bff;
  font-size: 1.1em;
}
summary:hover::marker {
  content: "▶";
}

• 必须用 content 替换默认三角，不能只改颜色；否则旧版 Safari 可能回退到原生图标
• 不要设 summary::marker { display: none; } —— 这会让部分读屏软件丢失状态提示
• 若需隐藏图标只留文字，用 content: ""; + padding-left: 0; 配合调整内边距

summary 文字样式生效的几个前提

字体、颜色、背景等基础样式可以生效，但要注意：

企业网站管理系统源码（多语言+多模板）

企业网站管理系统源码（多语言 + 多模板）是一套面向企业建站与外贸建站场景的内容管理系统（CMS），支持自定义多语言、自定义模型与字段、自定义表单等能力，并提供全部无加密源代码、支持私有化部署。

下载

• 必须给 summary 显式设置 display: block 或 inline-block，否则某些浏览器下 padding 和 background 不按预期渲染
• details[open] summary 可单独选中展开态标题，用于差异化样式（比如加下划线或变色）
• 避免在 summary 里嵌套 div 或 p —— 语义错误，且触发浏览器降级为 inline 渲染，导致样式错乱
• Firefox 对 summary 的 line-height 支持不稳定，建议用 padding 控制垂直居中

兼容性与无障碍绕不开的点

IE 完全不支持 details/summary，而 Safari 在 iOS 15.4 之前不支持 ::marker 自定义。如果项目需兼容旧环境：

• 用 @supports (display: list-item) 做特性检测，渐进增强
• 别依赖 summary 的 :focus-visible 样式 —— 多数浏览器未实现其焦点行为
• 所有自定义图标必须保留语义含义（比如“▶”表示可展开，“▼”表示已展开），不能纯靠颜色区分状态

真正麻烦的不是怎么改样式，而是改完后是否还能被键盘用户用 Enter 或 Space 正常触发展开 —— 这一点，任何 CSS 都不能破坏。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！