::marker不是写上就生效的通用工具，其生效需满足三大前提：ul/ol不能设list-style:none（应改用list-style-type:none）、li的display必须为list-item、浏览器须为chrome86+/firefox89+/safari15.4+；仅支持color、font-size等极少数属性，content仅接受字符串、counter()等受限值，不支持margin/background等；兼容方案为list-style:none+li::before全接管。
::marker 不是“写上就生效”的通用样式工具，它只在特定前提下起作用，且能控制的属性极少；多数失效不是代码写错，而是 display 值被覆盖、list-style 被设为 none、或浏览器根本不支持。
li::marker 样式完全不生效的三大主因
常见问题不是 CSS 写错了，而是基础条件没满足：
- ul 或 ol 上写了
list-style: none—— 这会彻底移除 marker 渲染通道，必须改用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 面板
content 属性怎么写才不翻车
content 是唯一能替换符号形态的出口，但限制极严，不是所有字符串都能用：
- 只接受纯字符串字面量（如
"→ "）、counter(list-item)、counters()，不能用url()、attr()、HTML 片段或拼接表达式 - 写
content: "•"容易错位，优先用 Unicode 编码：content: "\2022"（实心圆）、content: "\27A4"（右箭头） - 想加空格或标点，必须手动写进字符串里：
content: counter(list-item) ". "，而不是靠margin推 - ul 下
content支持有限，某些旧版 Safari 会直接 fallback 到默认圆点；ol 更稳，可安全用counter(list-item, lower-roman)
哪些样式能改、哪些绝对别碰
::marker 不是普通伪元素，浏览器只放行极少数属性：
- ✅ 安全可用：
color（最稳）、font-size（Chrome 110+/Safari 16.4+ 起稳定）、font-family（部分浏览器忽略）、text-shadow（实验性） - ❌ 一律无效：
margin、padding、background、border、display、transform、line-height、vertical-align - ⚠️ 小心使用：
font-weight在 Safari 16.4+ 才支持；font-variant-numeric仅 Chrome 115+ 支持，Firefox 不认 - ::marker 不继承父
li的font和color，必须显式写color: inherit、font-size: inherit才对齐
兼容老浏览器时怎么兜底
别指望 @supports selector(::marker) —— 它在 Safari 15.3 及更早版本里根本检测不出。真正可靠的降级路径是：
- 先写
li::marker样式作为现代增强 - 再用
li::before+list-style: none实现全接管：它兼容到 iOS 12.5，且支持background-image、margin、transform等完整能力 - 注意语义损失：
::before方案会让屏幕阅读器丢失原生列表结构识别，若项目对无障碍有强要求，需额外加 ARIA 属性补全
真正容易被忽略的是：当 li 内容换行时，::marker 的对齐方式由 list-style-position 控制（inside 会让符号和文本同流，outside 则独立缩进），而这个属性本身不会被 ::marker 规则覆盖 —— 它是 ul/ol 层级的布局开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
