::marker伪元素兼容性有限，Firefox 68+、Chrome/Edge 86+、Safari 15.4+才支持，且iOS Safari 15.4前完全不支持；仅设color可能生效，background和font-size等在旧版中无效。
marker伪元素不支持所有浏览器，特别是旧版Chrome和Safari
直接用 ::marker 设置颜色看似简单，但实际兼容性有限：Firefox 68+ 支持完整功能，Chrome 要 86+、Edge 86+，而 Safari 直到 15.4 才开始支持（且早期仅支持 color，不支持 background 或 font-size）。iOS Safari 15.4 之前完全不认这个伪元素。
常见错误现象：::marker { color: red; } 在 iPhone 上没反应，或 Chrome 80 环境下样式被忽略，控制台也不报错——它只是静默失效。
- 检查目标环境的
caniuse.com::marker支持表，别只看自己本地浏览器 - 若需兼容 Safari
-
::marker只能作用于<li>、<summary></summary>等少数元素，对自定义列表容器无效
color属性可用，但background、border等几乎全被忽略
::marker 是个受限伪元素，CSS 规范明确限定它只接受极小的属性子集。目前稳定支持的只有：color、font 相关（font-size、font-family）、content 和部分 text- 属性（如 text-align 不行）。
你写 ::marker { background: blue; border: 1px solid red; } —— 浏览器会解析但直接丢弃，不会报错，也不会渲染。
立即学习“前端免费学习笔记（深入）”；
- 想加背景色？只能靠
content+ Unicode 符号模拟，比如content: "•"; color: blue; - 想让圆点变方块再填色？用
content: "■"; color: #2563eb;更可靠 - 不要在
::marker里写margin或padding，它们无效；缩进得靠list-style-position或padding-inline-start
替代方案：用background-image或::before重写列表符号
当 ::marker 不够用或不兼容时，最稳妥的做法是关闭原生符号，用伪元素手动绘制。
关键步骤：禁用默认符号 → 用 ::before 插入内容 → 控制位置和颜色。
- 先写
li { list-style: none; }，否则::before和原生符号会叠在一起 -
li::before { content: "•"; color: #dc2626; margin-inline-end: 0.5em; }—— 注意用margin-inline-end而非margin-right，适配 RTL 文本 - 若要响应式大小，用
font-size: 0.8em;配合父元素字体缩放，比固定px更健壮 - 避免用
background-image: url(...)加载小图标，HTTP 请求开销+缓存问题，纯 CSS 符号更轻量
list-style-type设为none后，缩进容易错位
关掉原生符号后，<li> 默认缩进消失，文字会顶到左边缘。这不是 bug，是规范行为：原生缩进由 list-style 机制控制，一关就全没。
常见错误现象：列表项文字紧贴左边，和段落对不齐，看着像格式崩了。
- 补缩进优先用
padding-inline-start: 1.5em;（推荐），而不是margin-left，避免影响布局流 - 如果父
<ul></ul>有padding-left，记得减去它，否则双重缩进 - 用
display: flex布局列表时，::before的对齐要额外加align-self: flex-start，不然垂直居中偏高
真正麻烦的不是怎么改颜色，而是改完之后，在不同字号、不同方向（LTR/RTL）、不同嵌套层级下，符号和文字的相对位置是否始终可控——这点很容易被忽略，直到上线后用户反馈“iPhone上点歪了”或者“阿拉伯语列表符号跑右边去了”。
