如何用CSS控制列表中小圆点的颜色？

::marker伪元素无法直接设置color或background-color，仅能继承父级li的color值；需用li::before模拟并禁用原生list-style，通过position:absolute和transform精准对齐以适配多行、动态字号等复杂场景。

::marker 伪元素不能直接设 color 或 background-color，它只继承父级 li 的 color 值——这不是你写错了，是浏览器规范限制。

为什么直接给 ::marker 写 color 没用？

主流浏览器（Chrome 89+、Firefox 87+、Safari 15.4+）都遵循 CSS Pseudo-Elements Level 4 规范：::marker 只能继承 color，不支持 background、border、font-weight 等独立样式。哪怕你写了 li::marker { color: red; }，只要 li 自身没设 color，它就还是默认色。

1. ul 或 ol 上设 color 不会传递给 ::marker，必须作用于 li 元素本身
2. 如果 li 里有文字要不同颜色，得用 span 包裹文字并重置 color
3. ::marker 的 content 只接受字符串（如 "•"），不能插 SVG 或图标字体

想让小圆点和文字颜色不同，只能用 li::before

这是唯一可靠方案：禁用原生标记，用伪元素完全接管渲染。关键点不是“能不能做”，而是“对齐是否精准”——稍不注意就会上下错位。

1. 必须设 li { list-style: none; position: relative; }，否则 ::before 定位会漂移
2. vertical-align: middle 在行内场景下常失效，推荐用 transform: translateY(-50%) + top: 50%
3. 宽度/高度建议用 em 单位（如 width: 0.4em; height: 0.4em;），随字号缩放更稳
4. 如果列表项含多行文本，line-height 和 margin-top 要同步调，否则 bullet 只对齐第一行

兼容性差的旧环境（IE / 老安卓 WebView）怎么办？

这些环境根本不识别 ::marker，连降级都不行——必须从一开始就用 li::before 方案，且避免依赖 flex 或 grid 布局来对齐。

1. 不用 display: flex 包裹 li，老浏览器里 ::before 容易塌陷
2. 背景图方案（list-style-image）虽简单，但无法响应式缩放，SVG 图片在部分老 WebView 中渲染异常
3. 若需支持 iOS 14.5 以下 Safari，position: absolute 的 ::before 是最稳妥选择，别碰 inset 或 contain

真正麻烦的不是怎么画个圆点，而是当列表文字换行、字号动态变化、或嵌套在弹性容器里时，那个小圆点还能不能稳稳钉在第一行文字左侧中间——这点几乎没人提，但线上 bug 大多出在这儿。