::marker是目前唯一能原生控制列表项符号颜色、大小和内容的机制，但仅对display:list-item的li生效，且仅支持color、font-size、content等有限属性，不支持margin、background等；list-style-type失效主因是display值非list-item。
::marker 是目前唯一能直接、原生控制列表项符号颜色、大小和内容的 CSS 机制，但它不是“万能替换器”——它只在 li（且其 display 保持为 list-item）上生效，且样式支持极有限。
为什么 list-style-type 看似失效？先查 display 值
很多情况下符号消失，不是 CSS 写错了，而是元素被设成了 display: flex、display: grid 或 display: block。一旦脱离 list-item 上下文，list-style-type 和 ::marker 都会静默失效。
- 检查浏览器开发者工具中该
li的最终display计算值，必须是list-item - 若父容器是
flex或grid，别改li的display，而应确保ul/ol本身仍是display: block，并用margin/padding调整整体布局 -
list-style-type仅对display: list-item元素起作用，这是规范行为，不是 bug
li::marker 支持哪些属性？别乱试
::marker 只接受极少数 CSS 属性，且各浏览器支持程度不一。盲目写 font-family 或 background-color 不仅无效，还会让你误判兼容性。
- 最稳妥的是
color：所有现代浏览器（Chrome 99+、Firefox 115+、Safari 15.4+）都支持 -
font-size在 Chrome 110+、Safari 16.4+、Firefox 115+ 才稳定可用；旧版本可能忽略 -
content可用，但仅接受字符串（如"→ "）、counter()（如counter(list-item, lower-roman)）或attr()；不能嵌入 HTML、图片或 SVG -
font-weight、text-shadow有支持，但font-family在 Firefox 中基本被忽略，Safari/Chrome 也仅影响部分 Unicode 符号字形 - 禁止使用：
margin、padding、background、display、border—— 这些一律无效果
用 content 替换符号时，常见错位和不显示问题
直接写 content: "•" 容易导致符号与文字基线错位、缩进异常，甚至整个 ::marker 不渲染——问题不在语法，而在语义。
立即学习“前端免费学习笔记（深入）”；
- 优先用 Unicode 转义码，如
\2022（bullet）、\27A4（arrow right），比全角字符更可控 - 避免在
content值末尾加空格（如"→ "），字体差异会导致间距忽大忽小；改用margin-inline-start控制符号与文本距离（注意：该属性本身在::marker中是否生效需实测，部分浏览器仍不支持） - 若想复现默认编号逻辑，用
content: counter(list-item) ". "，但必须同时设list-style: none，否则原数字和content会叠加 - Firefox 对
content中非 ASCII 字符的支持略弱，测试时务必覆盖 Safari/Chrome/Firefox 三端
兼容性差时怎么降级？别硬扛 ::marker
当目标环境包含大量旧版浏览器（如 Chrome ::marker 不应作为唯一方案。
- 用
@supports selector(::marker)包裹现代写法，内部写li::marker { color: #3a86ff; }；外部 fallback 写ul { list-style-type: square; } - 彻底放弃
list-style系列，改用list-style: none+li::before：可完全控制内容、定位、颜色、图标（包括 SVG）、动画等 - 若需保留语义化列表结构，
li::before方案仍优于 JS 插入符号 —— 它不依赖运行时，且无障碍支持更好
真正难的不是写出 li::marker { content: "→ "; color: red; }，而是判断什么时候该用它、什么时候该绕开它。浏览器对 ::marker 的支持仍在收敛中，2026 年多数新项目可以放心用 color 和 font-size，但涉及 content 替换或跨浏览器精确对齐时，仍得靠 ::before + counter() 组合兜底。
