::marker不生效主因是浏览器不支持（chrome 86+/firefox 68+/safari 15.4+）、li的display非list-item、ul/ol设了list-style:none，或content写法错误（仅支持"→ "、counter(list-item)等，禁用url()、attr()）；margin/background等属性一律无效，需降级用li::before。
::marker 不生效，大概率不是你写错了 CSS，而是浏览器根本不认、或者列表项压根没触发 marker 渲染逻辑。
li 的 display 值不是 list-item
这是最隐蔽也最常见的失效原因。一旦 li 的最终计算 display 值不是 list-item，::marker 就直接被跳过——连样式面板里都看不到它。
- 父容器用了
display: flex或display: grid，且没给li显式设回display: list-item -
li被 CSS-in-JS 动态覆盖了display（比如设成block或contents） - 某些 UI 库（如 Ant Design、Chakra UI）默认把
li改为flex，导致原生 marker 彻底失活
验证方法：DevTools 选中 li → Computed 面板查 display 值；如果不是 list-item，就得强制重置：li { display: list-item; }。
ul/ol 上写了 list-style: none
list-style: none 是“物理删除”整个 marker 渲染通道，比 display 更狠——它连 ::marker 规则都不会解析。
- 必须改用
list-style-type: none（保留渲染入口，只清空符号类型） - 或保留
list-style-type: disc等内置值，再靠::marker覆盖内容和颜色 - 检查是否在全局重置样式（如 normalize.css、modern-normalize）里误加了
ul, ol { list-style: none; }
如果已写错，光补 ::marker 没用，得先改掉那条 list-style: none。
content 写法错误或浏览器不支持
content 是唯一能换掉圆点的出口，但它只接受极窄范围的值，错一个字符就静默失效。
- ✅ 合法：
content: "\2022";（Unicode 实心圆）、content: counter(list-item) ". ";（有序列表编号） - ❌ 无效：
content: url(icon.svg);（不支持图片）、content: attr(data-icon);（不支持属性读取）、content: "•" ;（分号前多空格） - Safari ≤15.3、Chrome ≤85、Firefox ≤79 完全忽略整条
::marker规则，DevTools 里都看不到该伪元素面板
调试建议：先删掉所有其他样式，只留 li::marker { content: "\27A4"; color: red; }，看是否出箭头；不行就说明浏览器或基础条件崩了。
想调间距、加背景、做悬停效果？别碰 ::marker
::marker 不是通用装饰工具，规范明确禁止大部分布局和视觉属性：
- ✅ 可用：
color（最稳）、font-size（Chrome 110+/Safari 16.4+ 才可靠）、font-family（部分浏览器忽略） - ❌ 一律丢弃：
margin、padding、background、border、transform、line-height - ⚠️ 注意：
content: none;只隐藏符号，缩进还在；要彻底移除空白，得配list-style: none+ 手动padding-inline-start
真正麻烦的是：当需求变成「红色圆点带灰色背景、离文字 8px、鼠标悬停变大」时，::marker 根本做不到——这时候必须退回到 li::before 全接管方案，否则永远卡在“明明写了 background 却没颜色”的死循环里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
