::marker生效需同时满足三前提：Chrome 86+/Firefox 68+/Safari 15.4+支持、li的display为list-item、ul/ol未设list-style:none；仅color/font-size等极少数属性有效，content限字符串/counter()，不支持margin/background，旧环境须用list-style:none+li::before降级。
::marker 不是写上就生效的通用样式工具，它只在三个条件同时满足时才真正渲染：浏览器支持（Chrome 86+ / Firefox 68+ / Safari 15.4+）、li 的计算 display 值为 list-item、父级 ul 或 ol 未设 list-style: none。缺一个，整条规则静默失效——DevTools 里都看不到 ::marker 面板。
为什么 li::marker { color: red; } 没反应？
不是代码错了，而是前提崩了：
-
ul上写了list-style: none→ 改成list-style-type: none才保留::marker渲染通道 -
li被父容器display: flex影响，或被 CSS-in-JS 覆盖为display: block→ 强制加display: list-item - 项目需兼容 iOS 16 或微信 X5 内核 →
::marker直接忽略，必须降级
content 怎么写才不 fallback 到默认圆点？
content 是唯一能换掉符号的出口，但只接受三类值：纯字符串字面量、counter()、counters()。写错一个字符，就回退。
- 别用
content: "•"—— 易因字体缺失错位，改用 Unicode：content: "\2022"（实心圆）、content: "\27A4"（右箭头） - 末尾空格必须显式写进引号：
content: "→ "，不能靠margin推 - 避免 emoji：
content: "→ "在 Firefox 中宽度不均，建议加font-size: 0.9em微调 - 单引号
'•'在某些构建工具中会被误删，一律用双引号
哪些样式能设、哪些绝对别碰？
::marker 不是普通伪元素，浏览器只放行极窄属性子集，其他一律静默丢弃（不报错，也不生效）：
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全可用：
color（最稳，始终生效）、font-size（Chrome 100+/Firefox 98+ 稳定，Safari 16.4+ 有限支持）、font简写（如font: bold 1.2em sans-serif） - ❌ 一律无效：
margin、padding、background、border、transform、line-height、vertical-align - ⚠️ 想调圆点和文字间距？改
ul的padding-left或text-indent，别碰::marker的margin
真正复杂的符号定制（比如带背景色的图标、SVG、多层缩进对齐），::marker 无能为力。它只适合轻量级统一控制，且必须搭配 list-style: none + li::before 作为兜底——这不是备选方案，而是生产环境的必选项。
