::marker仅微调原生符号的颜色、大小等有限属性，不支持背景、边距等；失效主因是浏览器兼容性差（Safari≤15.3等静默忽略）、display非list-item或被list-style-image压制；可靠方案是list-style:none+li::before。
::marker 不是用来“替换”符号的，而是用来“微调”原生符号的视觉表现——它只管颜色、大小、粗细和有限内容，其他一律不管。
li::marker { color: red; } 为什么没生效？
最常见原因不是写错了，而是浏览器根本不认或被覆盖了：
- 检查 DevTools 中
::marker规则是否被划掉（strikethrough）：如果是，说明当前浏览器版本不支持（Safari ≤15.3、Chrome ≤85、Firefox ≤67 静默忽略） - 确认
li的最终display计算值是list-item：父容器设了display: flex或显式写了display: block，::marker就直接失效 - UA 样式（比如 Chrome 默认
ul li的color）可能优先级更高，试试加!important或提高选择器权重，例如ul > li::marker - 用了
list-style-image或list-style-type，会压制::marker的content行为（但不影响color和font-size）
哪些 CSS 属性真能用在 ::marker 上？
别乱试，只这几种在主流浏览器（Chrome ≥86、Firefox ≥68、Safari ≥15.4）里稳定生效：
-
color：必支持，改符号颜色最安全 -
font-size、font-weight、font-style：Chromium/Firefox 稳定；Safari 15.4+ 才可靠 -
content：仅限配合counter()（如content: "第" counter(list-item) "条:"），且只对ol有效；ul中写content: "→ "基本不渲染或错位 -
text-shadow：部分支持，但别指望跨浏览器一致
以下全部无效，写了也白写：background、margin、padding、width、height、border、line-height、vertical-align。
立即学习“前端免费学习笔记（深入）”；
想用 emoji 或 SVG 图标？别碰 ::marker
::marker 不解析图像、不支持富文本、不接受 url() 或 base64 data URL。哪怕你写 content: "✅"，在 Firefox 中可能显示为空白，Safari 中可能基线偏移严重。
真正可控的做法是放弃 ::marker，改用：
-
list-style: none清掉原生符号 -
li::before插入内容，支持content: "✅"、content: url(icon.svg)、background-image等所有样式 - 用
display: inline-block+width+text-align: center控制对齐，避免换行时符号飘走
示例关键片段：
ul {
list-style: none;
padding-left: 0;
}
li::before {
content: "➡";
color: #2980b9;
font-size: 1.1em;
margin-inline-end: 0.4em;
display: inline-block;
width: 1em;
text-align: center;
}
嵌套列表中 ::marker 的层级陷阱
嵌套 ol 时，counter() 默认只计最外层，ol ol li::marker 里的 counter(list-item) 仍返回外层数字——这不是 bug，是规范行为。
要实现“1.1、1.2、2.1”这种格式，必须手动管理计数器：
- 给外层
ol设counter-reset: section - 每项
li内用counter-increment: section - 内层
ol设counter-reset: subsection - 内层
li::marker用content: counter(section) "." counter(subsection) " "
但注意：这个方案依赖 content 支持，Safari 对嵌套 counter() 的 ::marker 渲染仍不稳定，实测易回退到默认数字。
真正麻烦的地方不在语法，而在于你得时刻判断：这个项目要不要支持 Safari 15.3 或旧版 Android WebView？如果要，::marker 就只能当“锦上添花”，不能当“基础设施”。
