::marker样式不生效的三大主因是：list-style:none禁用标记渲染、li非list-item显示模式、低版本浏览器不支持；仅color等少数属性有效，background等一律无效；content需严格配合counter()函数且注意兼容性。
::marker 能改颜色、字体、内容，但不能加背景、边框、位移；它不是“写上就生效”，必须满足前提条件才起作用。
为什么 ::marker 样式完全不生效？
不是代码写错，而是基础条件被破坏：
-
ul或ol上写了list-style: none—— 这会彻底干掉标记渲染通道，得改用list-style-type: none才保留::marker介入机会 -
li的最终display值不是list-item—— 比如父容器是display: flex，或li被设为display: block/display: contents，::marker就直接失效 - 浏览器版本太低 —— Chrome 85、Firefox 79、Safari 15.3 及更早版本会静默忽略整条规则，DevTools 里都看不到
::marker面板
::marker 支持哪些样式？哪些绝对别碰？
它只放行极少数属性，且行为有差异：
- ✅ 安全可用：
color（最稳）、font-size（Chrome 110+/Safari 16.4+ 起稳定）、font-weight（Safari 16.4+ 才支持）、content（仅接受counter()、纯字符串如"→ "） - ❌ 一律无效：
margin、padding、background、border、transform、display、line-height、vertical-align - ⚠️ 小心使用：
text-align对某些list-style-type无效；font-family在部分浏览器会被忽略；content里拼接字符串（如"Step " counter(item)）在 Safari 16.2 及旧版 Firefox 中可能退为空白
如何安全地用 content 替换序号内容？
content 是唯一能改变符号形态的出口，但写法容错率极低：
立即学习“前端免费学习笔记（深入）”；
- 必须配合
counter()函数，不能写死数字 —— 错误写法：content: "1. "；正确写法：content: counter(list-item) ". " - 前缀/后缀要手动加空格 ——
content: "Step" counter(list-item) ". "会粘连成Step1.，得写成content: "Step " counter(list-item) ". " - 嵌套列表需显式指定计数器类型 ——
content: counter(item, lower-roman)，否则可能回退为十进制 -
counter-reset必须设在ol或ul上，不能只写在li上；否则计数器不会初始化
兼容老浏览器时怎么兜底？
别指望 ::marker 自动降级，它被忽略就是彻底消失：
- 必须主动用
list-style: none+li::before全接管 —— 关键是文字缩进要和伪元素 left 值对齐，推荐padding-left: 1.5em+li::before { position: absolute; left: -1.5em; } - 若需语义完整（比如屏幕阅读器识别），给
ol加role="list"，每个li加role="listitem"，并设aria-hidden="true"防止重复朗读 - 旧版 Safari（iOS 16 及更早）对
::marker的content支持极弱，哪怕只写counter(item)也可能失败，此时只能靠::before方案
真正麻烦的不是怎么写 ::marker，而是判断它在哪种组合下会静默失效——display: list-item 是否被覆盖、list-style 是否被误设、目标浏览器是否真支持 content 中的写法，这三处最容易漏查。
