怎么通过HTML的CSS ::marker伪元素自定义列表项的符号颜色与大小-html教程-PHP中文网

截至2026年4月，chrome/edge 86+、firefox 68+、safari 15.4+（含ios）稳定支持::marker的color和font-size；旧版chrome 80、safari 14及更早、所有ie版本均静默忽略；仅color必支持，font-size等字体属性在chromium/firefox中稳定，safari 15.4+起支持，background/margin等全部无效。

怎么通过html的css ::marker伪元素自定义列表项的符号颜色与大小

::marker 能直接改列表符号颜色和大小，但不是所有浏览器都认，也不是所有 CSS 属性都能用——写对了没效果，大概率是兼容性或属性越界了。

哪些浏览器支持 `::marker` 的 `color` 和 `font-size`

截至 2026 年 4 月，稳定支持 color + font-size 的环境有：

Chrome / Edge 86+
Firefox 68+
Safari 15.4+（注意：iOS Safari 15.4 之前完全不支持）

旧版 Chrome（比如 80）、Safari 14 或更早、所有 IE 版本——::marker 会被静默忽略，不报错也不渲染。你写 li::marker { color: red; font-size: 1.2em; }，在 iPhone 上根本没反应，就是这个原因。

`::marker` 只能用哪些 CSS 属性

它不是普通伪元素，规范强制限制了可用属性。目前可靠生效的只有：

color（必支持）
font-size、font-family、font-weight（Chromium/Firefox 稳定，Safari 15.4+ 支持）
content（仅限配合 counter()，不能随意写 "→" 替换默认圆点）
text-shadow（部分浏览器支持）

以下写法全部无效，且浏览器不会警告：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

background、border、padding、margin
line-height、vertical-align、text-align
display（设成 block 或 inline-flex 会被忽略）

为什么 `li::marker { color: red; }` 还是没变色

常见失效原因不止兼容性一种：

父元素设置了 color，而 ::marker 默认继承它——你得加 !important 或提高选择器权重，比如 ul li::marker
用了 list-style-image，会覆盖 ::marker 的作用域
元素没触发 display: list-item（比如被 Flex/Grid 父容器影响，或显式设了 display: block）
某些 UA 样式（如 Chrome 的默认 ul 样式）带 color 声明，优先级比你的规则高

验证是否生效，最直接的方式是打开 DevTools → 选中 li → 在 Styles 面板里看 ::marker 规则有没有被划掉（strikethrough）。如果被划掉，说明不支持或被覆盖。

替代方案：当 `::marker` 不行时怎么稳住样式

需要兼容 Safari 15.3、Chrome 80 或更低版本时，必须放弃 ::marker，改用 list-style: none + ::before：

li {
  list-style: none;
  position: relative;
  padding-inline-start: 1.5em;
}

li::before {
  content: "•";
  color: #dc2626;
  font-size: 1.1em;
  position: absolute;
  inset-inline-start: 0;
  line-height: 1;
}

关键点：