::marker伪元素不支持直接设置color或background-color，只能继承父级li的color值；需用li::before模拟marker实现独立配色，并禁用原生list-style。
marker伪元素不支持直接设置颜色
直接给 ::marker 设置 color 或 background-color 是无效的——浏览器目前（截至2024年主流版本）只允许它继承父级的 color 值，且无法通过 background、border 等属性覆盖渲染。这不是写法错误，而是规范限制。
用color属性间接控制marker颜色
唯一可靠方式是让 ::marker 继承父级 color，所以必须把颜色设在列表项或其容器上：
-
li元素本身设color: #e74c3c，::marker就会变成红色 - 如果
li内有其他文字需要不同颜色，得用span包裹文字并重置color - 注意：
ul或ol上设color不会传递给::marker，必须作用于li
li {
color: #9b59b6;
}
li::marker {
/* 这里写 color: red 会被忽略 */
}需要独立配色时改用list-style-image或::before
当 marker 颜色和文字颜色必须不同（比如红点+黑字），::marker 就不够用了：
-
list-style-image可用 SVG data URL 实现任意颜色圆点，但无法响应字体大小缩放 - 更通用的做法是
li::before+content+display: inline-block模拟 marker，用background-color控制颜色 - 记得禁用原生 marker：
list-style: none
li {
list-style: none;
position: relative;
}
li::before {
content: "";
display: inline-block;
width: 0.4em;
height: 0.4em;
background-color: #e74c3c;
border-radius: 50%;
margin-right: 0.5em;
vertical-align: middle;
}兼容性与 fallback要留心
::marker 在 Safari 15.4+、Chrome 89+、Firefox 87+ 支持良好，但旧版 Safari 和部分安卓 WebView 完全不识别。如果项目需兼容 IE 或老 Android，只能用 ::before 方案。
立即学习“前端免费学习笔记（深入）”；
另外，::marker 的 content 仅支持字符串（如 "→ "），不能插入图标字体或 SVG；而 ::before 虽灵活，但需手动处理缩进对齐和行高匹配——这点容易被忽略，结果导致 bullet 和文字上下错位。
