::marker 仅Chrome 115+、Firefox 109+、Safari 15.4+稳定支持，旧版浏览器完全忽略；content仅允许counter()、counters()或纯字符串，不支持拼接；垂直对齐用vertical-align，水平偏移用margin-inline-start；嵌套列表需手动重置计数器。
Chrome 115+ 才支持 ::marker，旧版浏览器直接失效
不是所有浏览器都认这个伪元素。Chrome 115、Firefox 109、Safari 15.4 起才开始稳定支持 ::marker；Edge 基于新版 Chromium 也行，但 IE 和旧版 Safari/Chrome 完全忽略它，连 fallback 都不会触发。
常见错误现象：ol li::marker { color: red; } 在 Chrome 114 或 Firefox 108 下完全没反应，开发者工具里也看不到该规则生效。
- 用前先查 caniuse，确认目标用户环境
- 如果需兼容旧浏览器，必须搭配
list-style: none+counter()手动模拟（见下一条） - Safari 15.4–16.3 对
content中的counter()支持不全，比如不能写content: "Step " counter(item);
content 里只能用 counter()，不能拼字符串或加 HTML
::marker 的 content 属性受限极严：只允许 counter() 函数、counters() 函数，以及纯字符串字面量（如 "▶ "），不支持属性值拼接、attr()、url()，更不能写 <span></span> 或内联样式。
容易踩的坑：content: "Item " counter(item); 在 Safari 16.2 下会退化为空白；而 content: counter(item) " —"; 在部分旧版 Firefox 里会被整个丢弃。
立即学习“前端免费学习笔记（深入）”；
- 安全写法只有两种：
content: counter(item);或content: "•"; - 想加前缀/后缀？改用
counter-reset+counter-increment配合li::before模拟（兼容性更好） -
counter()第二个参数（样式）只接受标准关键字：decimal、lower-roman、upper-alpha等，不支持自定义字符映射
数字颜色/字体能调，但对齐和间距控制力很弱
::marker 可以设置 color、font-size、font-family，但无法直接调 text-align、line-height、padding 或 vertical-align —— 浏览器把 marker 当作一个“符号盒”，它的位置由列表项整体布局决定。
典型问题：把 font-size 设为 1.2em 后，数字变大了，但和文字基线错位，看起来像悬在空中。
- 垂直对齐靠
vertical-align（仅对 inline-level marker 有效），常用值：middle、baseline、text-bottom - 水平偏移只能靠
margin-inline-start（注意不是margin-left，它受书写方向影响） - 想精确控制数字与文字距离？老办法仍是
li { padding-inline-start: 2em; }+li::before { margin-inline-end: 0.5em; }
嵌套列表的计数器要手动重置，::marker 不自动继承
默认情况下，子 ol 会继续父级的计数器，而不是从 1 开始。这不是 ::marker 的 bug，而是 CSS 计数器本身的行为 —— 它们不自动作用域隔离。
现象：ol > li > ol 里的第一项显示 “1.1”，但你想让它显示 “1.”、“2.”……
- 必须显式重置：
ol > li > ol { counter-reset: item; } - 同时确保子项正确递增：
ol > li > ol > li { counter-increment: item; } - 如果嵌套三层以上，每个层级建议用不同计数器名（
item、subitem、detail），避免冲突
content 中复合表达式的处理差异 —— 看似写的没问题，上线后某些 iOS 用户列表编号直接消失，查半天才发现是 "Step " counter(step) 这种写法触发了渲染降级。 
