li::marker样式无反应的最常见原因是浏览器不支持或列表被禁用：ie全系列、旧版safari不支持；ul/ol设list-style:none会移除marker生成逻辑；li的display非list-item（如被flex/grid影响）也会导致失效。
li::marker 是目前唯一能原生、语义化地单独控制列表符号颜色和大小的机制，但它不是“写了就生效”的通用开关——兼容性、display 值、属性限制三者任一不满足，都会导致静默失效。
为什么 li::marker 样式完全没反应
最常见原因不是代码写错，而是浏览器根本没进入 ::marker 渲染流程：
- 父级
ul或ol被设了list-style: none—— 这会直接移除 marker 生成逻辑，::marker规则压根不会被计算 -
li的最终display计算值不是list-item（比如被 flex/grid 父容器影响，或显式写了display: block） - 目标浏览器不支持：IE 全系列、Safari
- 开发者工具里看到
::marker规则被划掉（strikethrough），说明 CSS 层级被覆盖，或 UA 样式优先级更高（如 Chrome 默认ul的color声明）
li::marker 能用哪些属性？别乱加
它只接受极窄的白名单属性，加了也无效，还干扰调试：
- ✅ 必支持：
color（所有现代浏览器都认） - ✅ 有条件支持：
font-size（Chrome 110+/Firefox 115+/Safari 16.4+ 才稳定）、font-family（仅影响 Unicode 符号字形，Firefox 基本忽略）、text-shadow - ✅
content：仅允许字符串（"→ "）、counter(list-item)、counters()；不支持attr()、url()、HTML 片段或拼接（如"Step " counter(item)） - ❌ 绝对无效：
margin、padding、background、border、display、line-height、vertical-align（设了等于没写）
想换符号？content 写法有坑
直接写 content: "•" 容易错位甚至不渲染，问题不在语法，在字体基线和空格处理：
- 用 Unicode 字符比全角中文标点更可控，例如
\2022（bullet）、\27A4（arrow right） - 避免在字符串末尾加空格（如
"→ "），不同字体渲染间距差异大；改用margin-inline-start控制水平偏移（注意：该属性在部分旧版 Safari 的::marker中仍不支持） - 复现默认编号逻辑时，必须写
content: counter(list-item, lower-roman) ".";，且同时保留list-style-type: lower-roman（否则计数器可能不初始化） - Firefox 对非 ASCII 字符支持弱，测试务必覆盖 Chrome / Safari / Firefox 三端
当 ::marker 不行时，怎么稳住样式
需要兼容 Safari 15.3、Chrome 80 或更低版本时，必须放弃 ::marker，改用语义降级方案：
- 先设
ol, ul { list-style: none; }，再用li::before模拟标记 - 配合
counter-reset/counter-increment实现有序编号（counter(list-item)在::before中支持更广） - 手动控制缩进：
li { padding-inline-start: 2em; }+li::before { margin-inline-end: 0.5em; } - 注意：此方案会丢失屏幕阅读器对原生列表结构的识别，若可访问性要求高，需额外加
role="list"和role="listitem"
li 内容换行，::marker 的垂直对齐由 list-style-position 控制（outside vs inside），而这个属性本身无法在 ::marker 里覆盖。你调了 font-size 却发现第二行文字“悬空”，大概率是这里卡住了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
