如何利用CSS伪元素::marker修改列表项圆点颜色-css教程-PHP中文网

li::marker { color: red; } 不生效是因为浏览器不支持、li 的 display 不是 list-item 或父级 ul 设了 list-style: none；color 是唯一稳定支持的属性，其他如 background、margin 等均无效。

如何利用css伪元素::marker修改列表项圆点颜色

直接写 li::marker { color: red; } 大概率没反应——不是语法错，而是三个前提至少崩了一个：浏览器不支持、li 的 display 不是 list-item，或父级 ul 被设了 list-style: none。

为什么 `li::marker { color: red; }` 完全不生效

它不是“写了就生效”的普通伪元素。浏览器只在满足全部三个条件时才创建并渲染 ::marker：

ul 或 ol 没有设置 list-style: none（设了就等于关掉整个通道，得改用 list-style-type: disc 或保留默认）
li 的计算 display 值必须是 list-item（被 flex / grid 父容器影响、CSS-in-JS 覆盖、或手动设成 block 都会失效）
浏览器版本达标：Chrome 86+、Firefox 68+、Safari 15.4+（iOS 15.4 起），旧版 Safari（如 15.3）、微信 X5 内核、Android WebView 旧版本会静默忽略整条规则，DevTools 里都看不到 ::marker 面板

`color` 是唯一真正稳的属性，其他全是高风险

::marker 受规范严格限制，超出白名单的声明会被浏览器静默丢弃（不报错、不警告、也不渲染）：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

✅ 安全可用：color（必支持，最稳）、font-size（Chrome 100+/Firefox 98+ 稳定，Safari 16.4+ 有限支持）、font 简写（如 font: bold 1.2em sans-serif）
❌ 一律无效：background、border、padding、margin、line-height、vertical-align、display、text-align（仅对多字符 content + list-style-position: inside 有效）
⚠️ 小心使用：font-weight 在 Safari 16.4+ 才支持；font-family 单独写无效，必须包在 font 简写里

想兼容老环境？别硬刚 `::marker`，先兜底再升级

只要目标环境含 iOS 15.3、Chrome 80 或 Android WebView 旧版本，::marker 就不能当唯一方案：

用 @supports (::marker) { } 包裹现代样式，避免污染老环境
降级写法必须包含两部分：ul { list-style: none; padding-left: 0; } + li::before { content: "• "; color: #dc2626; margin-inline-start: 0.5em; }
li::before 方案里，调间距必须用 margin-inline-start 或 padding-inline-start，::marker 的 margin 和 padding 全部无效

最容易被忽略的一点：符号和文字之间的物理间距是硬编码的

即使 color 生效了，::marker 和文本之间的距离仍是 UA 样式写死的，::marker 自身无法控制，list-style-position 也动不了它——必须靠 text-indent、padding-left 或 li::before 的定位来间接调节。这个间隙在不同浏览器里还不一致，实测时建议用像素值微调。