::marker无效主因是三大前提之一失效：ul/li设list-style:none、li的display非list-item、或浏览器不支持（Safari15.3-/Firefox67-/Chrome85-）；仅color、font-size等极少数属性有效，content须用双引号字符串如"• "或"\2022"，间距需靠padding-left/text-indent调整，旧环境须降级为list-style:none+li::before。
::marker 不能直接替换 list-disc 的圆点——你写的样式没反应，大概率是因为它根本没被浏览器渲染，或者你设的属性压根不被支持。
为什么 ul li::marker { color: red; } 完全没效果
三个前提崩一个，整条规则就静默失效，DevTools 里都看不到 ::marker 面板：
-
ul或li上写了list-style: none→ 它会彻底关闭::marker的渲染通道，得改成list-style-type: disc或保留默认 -
li的计算display值不是list-item→ 比如父容器是display: flex、CSS-in-JS 覆盖了样式、或手动设了display: block - 浏览器不支持 → Safari 15.3 及更早、Firefox 67 及更早、Chrome 85 及更早全部忽略整条规则；iOS 16 / 微信 X5 内核也基本不认
content 是唯一能换掉圆点的出口，但写错一个字符就回退
content 不接受 url()、attr()、CSS 变量或拼接表达式，只认字符串字面量、counter() 或 counters()：
- ✅ 推荐写法：
content: "\2022";（Unicode 实心圆），content: "• ";（双引号内末尾带空格，防文字粘连） - ❌ 别写：
content: "•" ;（分号前多空格）、content: '•'（单引号在某些构建工具中被删）、content: url(./dot.svg)（完全不支持） - ⚠️ Emoji 如
"→ "在 Firefox 中宽度不均，可加font-size: 0.9em微调对齐
哪些样式能生效，哪些写了等于白写
::marker 不是普通伪元素，浏览器只放行极窄的属性子集，其他一律静默丢弃（不报错、不警告、也不渲染）：
- ✅ 安全可用：
color（最稳）、font-size（Chrome 100+/Firefox 98+ 稳定，Safari 16.4+ 有限支持）、font简写（如font: bold 1.2em sans-serif）、text-align（仅对多字符content生效） - ❌ 一律无效：
margin、padding、background、border、transform、display、line-height、vertical-align - ⚠️ 小心使用：
font-weight在 Safari 16.4+ 才支持；font-family单独写会失效，必须包进font简写里
想调圆点和文字间距？别碰 ::marker 的 margin
::marker 不支持 margin 和 padding，强行写等于白写。调整间距只能从外部入手：
- 用
ul的padding-left控制整体缩进 - 用
text-indent或padding-left配合list-style-position: inside - 若需兼容旧环境（比如 iOS 16 或微信内核），必须降级为
list-style: none+li::before，否则符号可能消失或叠出两个
真正可控的路径永远是：list-none 清除默认，再用 ::marker 显式声明 content 和基础样式；而任何试图绕过这个前提去“增强”原生 list-disc 的做法，都会在某个浏览器里突然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
