::marker可直接修改列表符号颜色、大小和内容，但不支持背景、边框、间距等属性；Chrome 86+、Firefox 68+、Safari 15.4+才支持，旧版Safari及微信浏览器会静默忽略，须用list-style:none+::before降级。
::marker 能直接改圆点颜色、大小、内容，但不能加背景、边框、间距；旧版 Safari 和微信浏览器会静默忽略整个规则，必须做降级。
为什么 ul li::marker { color: red; } 没反应
最常见原因是浏览器不支持——Chrome 86+、Firefox 68+、Safari 15.4+（即 macOS 12.3 / iOS 15.4 起）才认 ::marker。微信内置浏览器（基于 X5 内核）、iOS 15.2 及更早的 Safari 直接跳过该规则，不报错也不 fallback。
- 用
@supports (::marker) { ... }包裹现代样式，避免污染老环境 - 在 Safari 15.2 上写
ul li::marker { content: "•"; }，实际渲染为空白（不是圆点） -
display: inline的li不触发::marker，必须保持默认display: list-item
content 怎么安全地替换成自定义圆点
content 是唯一能“换掉”默认圆点的方式，但语法极其敏感：多一个空格、错一个引号、漏一个分号，整条规则就失效。
- ✅ 正确写法：
ul li::marker { content: "• "; color: #555; font-size: 1.1em; }（注意空格在引号内，且无多余符号） - ❌ 错误写法：
content: "•" ;（分号前有空格）、content: '•'（单引号在某些构建工具中被误删） - emoji 如
content: "→ "在 Firefox 中可能宽度不均，建议加font-size: 0.9em微调对齐 -
content不支持attr()、url()或 CSS 变量，想动态控制得靠counter()+ 自定义属性间接实现
哪些样式能设，哪些一设就无效
::marker 只接受极窄的属性子集，其他统统被浏览器忽略（不是报错，是静默丢弃）：
立即学习“前端免费学习笔记（深入）”；
- ✅ 允许：
color、content、font简写（含font-size/font-weight）、text-align（仅对多字符content生效）、white-space - ❌ 无效：
margin、padding、background、border、transform、font-family单独写（但font: 700 1.2em "SF Mono"可以） - 想调圆点和文字间距？别碰
::marker的 margin——改ul的padding-left或li的text-indent
兼容性兜底必须用 list-style: none + ::before
只要项目需支持 iOS 16 或 Android WebView 旧版本，::marker 就不能当唯一方案。稳妥做法是双写：
ul.custom {
list-style: none;
}
ul.custom li::marker {
content: "• ";
color: #3b82f6;
}
@supports not (::marker) {
ul.custom li::before {
content: "• ";
color: #3b82f6;
margin-right: 0.5em;
}
}
注意：::before 需手动处理对齐（比如 vertical-align: middle），而 ::marker 原生对齐稳定——这点容易被忽略，但直接影响列表可读性。
