::marker不生效主因是前提不满足：ul/ol设了list-style:none（关闭渲染链）、li的display非list-item（如被flex影响）、浏览器过旧（Chrome
::marker 能改颜色、字号、内容，但不能调位置、加背景、设边距——它不是“可自由布局的盒子”，而是浏览器原生生成的标记渲染通道，用错前提或越界属性就彻底静默失效。
为什么 li::marker 写了却完全没反应
不是代码写错，大概率是以下任一条件不满足：
-
ul或ol上写了list-style: none—— 这会直接砍掉整个 marker 渲染链；必须改成list-style-type: none才保留::marker介入机会 -
li的最终display值不是list-item—— 比如父容器是display: flex、li被设为display: block或被 CSS-in-JS 动态覆盖 - 浏览器版本太旧 —— Chrome ::marker 面板
content 怎么写才不丢序号、不翻车
content 是唯一能改符号形态的出口，但语法极严：
- 要保留编号逻辑，必须用
counter(list-item)，不能写死字符串（如"1."）或自定义计数器名（如counter(step)） - 空格和标点得手动写进字符串里：
content: "(" counter(list-item) ") "合法；content: "(" counter(list-item) ")"会紧贴文字，无间隔 - 避免
content: "•"这类纯字符写法——易错位、缩进异常；优先用 Unicode：content: "\27A4 "（右箭头）、content: "\2022 "（圆点） -
ul下content支持弱，某些 Safari 会 fallback 到默认圆点；ol更稳，可放心用counter(list-item, lower-roman)
哪些样式能改、哪些改了也白搭
::marker 不是普通伪元素，浏览器只放行极少数属性：
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全可用：
color（最稳）、font-size（Chrome 110+/Safari 16.4+ 起稳定）、font-weight（Safari 16.4+）、text-shadow（实验性） - ❌ 一律无效：
margin、padding、background、border、transform、display、line-height、vertical-align - ⚠️ 小心使用：
font-family在 Firefox 中基本被忽略；text-align部分浏览器支持，但无法真正“移动”标记位置
::marker 不继承父 li 的 color 和 font-size，必须显式写 color: inherit、font-size: inherit 才对齐。
需要右移数字、加背景色、做悬浮效果？别硬扛 ::marker
它天生不支持位移与装饰。真要实现这些，得退到更可控的方案：
- 给
ol设list-style: none+counter-reset: item - 用
li::before注入content: counter(item) ". " - 再通过
display: inline-block+width+text-align: right控制数字右对齐，或用position: relative+left微调位置
这个方案兼容 IE8+，且能加 background、border-radius、box-shadow——::marker 的边界，就是该换工具的地方。
