因为list-style: none会彻底关闭浏览器对列表标记的原生渲染流程，::marker根本没机会挂载——它只作用于“还活着”的原生标记；正确做法是用list-style-type: disc等保留原生机制，再用::marker覆盖样式。
为什么::marker加list-style: none就失效？
因为list-style: none会彻底关闭浏览器对列表标记的原生渲染流程，::marker根本没机会挂载——它只作用于“还活着”的原生标记。一旦list-style设为none，::marker规则被静默忽略，DevTools里都看不到匹配项。
正确做法是保留原生机制：用list-style-type: disc（或其他内置值）代替none，再用::marker覆盖内容或颜色。如果真要清空，默认圆点必须靠content: ""，而不是删掉整个标记系统。
::marker能改什么、不能改什么？
它不是通用伪元素，浏览器只放行极窄的属性子集，其他一律静默丢弃（不报错，也不生效）：
-
color：始终可用，包括rgba()、CSS变量 -
content：仅接受字符串字面量（如"• "）、counter(list-item)，不支持url()、attr()、拼接字符串 -
font-size、font-weight、font简写：Chrome 100+/Firefox 98+稳定，Safari 16.4+才有限支持 -
text-align：仅对多字符content生效（如"▶▶"） -
margin、padding、background、border、display、transform：一律无效
怎么安全地用content替换圆点？
语法极其敏感，一个空格或引号类型错误就会全盘失效：
- ✅ 正确：
li::marker { content: "• "; }（双引号内含空格，分号紧贴引号） - ❌ 错误：
content: "•" ;（分号前空格）、content: '•'（单引号易被构建工具剥离）、content: "\2022"（Unicode需转义且部分环境不认） - 推荐用稳定 Unicode 字符：
content: "\2022"（实心圆）、content: "\27A4"（右箭头），避免 emoji 因字体缺失回退成方块 - 别指望
content能控制间距——想调圆点和文字距离，改ul的padding-left或li的text-indent
兼容性兜底时该怎么做？
不是所有用户都用 Chrome 115+ 或 Safari 16.4+，尤其微信 X5 内核、iOS 15.2 及更早 Safari 会静默忽略整条::marker规则：
- 先用
@supports (::marker) { ... }包裹现代样式，避免污染老环境 - 降级方案必须用
list-style: none+li::before：支持background、border-radius、transform等完整样式，但会丢失语义和屏幕阅读器识别 - 若需可访问性，别用
::before伪造符号；优先保::marker，仅在必要时妥协
真正容易被忽略的是：当li内容换行时，::marker的对齐由list-style-position决定，inside和outside行为差异极大，调试时得连同这个属性一起验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
