ol li::marker { color: red } 未生效主因是浏览器不支持（chrome 86/firefox 68/safari 15.4前静默忽略）、li display非list-item、或被list-style-image禁用；验证方式为devtools中查看::marker规则是否被划掉。
ol li::marker { color: red } 为什么没生效
直接写 ol li::marker { color: red } 却看不到效果，大概率不是代码写错，而是被浏览器静默忽略。Chrome 86+、Firefox 68+、Safari 15.4+ 才真正支持 ::marker 的 color；旧版 Safari（如 iOS 15.3）、Chrome 80 或 IE 完全不识别这条规则，DevTools 里也不会报错，只是划掉或根本不显示。
验证方式很简单：选中一个 li 元素，在 Styles 面板里找 ::marker 规则——如果整条被划掉（strikethrough），说明当前环境不支持。
- 别依赖父元素
color继承：ol或body设了color: #333，::marker可能继承它，覆盖你写的red；建议给li显式设color，再单独控制::marker -
list-style-image会禁用::marker：一旦用了图片符号，::marker规则直接失效 - 确保
li是标准 display：如果li被 Flex/Grid 父容器影响，或显式设了display: block，可能丢失display: list-item，::marker就不会触发
哪些 color 写法是真正可靠的
::marker 对 color 的支持最稳定，所有兼容浏览器都认，但仅限纯颜色值本身：
-
color: #e74c3c✅ -
color: rgba(231, 76, 60, 0.9)✅ -
color: var(--primary)✅（CSS 变量可用） -
color: currentColor✅（但慎用，容易和文本颜色混淆） -
color: hsl(12, 100%, 60%)✅
以下写法看似合理，但实际无效或不可靠：
-
background-color: yellow——::marker不支持background类属性，整条规则被丢弃 -
text-shadow: 0 0 2px blue—— 部分浏览器支持，但 Safari 15.4 初始版本不认，别当主力用 -
border: 1px solid red—— 完全无效，且无提示
想改编号字体大小或加粗怎么办
font-size 和 font-weight 在 Chromium/Firefox 中基本可用，但 Safari 15.4+ 才开始支持，且效果有限：
-
font-size: 1.3em✅ 多数现代环境生效，但 Safari 15.4 初期可能只对ol有效，ul圆点缩放不明显 -
font-weight: bold⚠️ 对数字有效（如1.变粗），但对disc符号无效——圆点是图形绘制，不是文本 -
font-family: "Inter", system-ui⚠️ 基本无效：符号不走字体渲染路径，设了也看不出变化
如果必须让编号明显更大更醒目，更稳妥的方式是放弃 ::marker 的 font-size，改用 content + counter() 配合 font-size 控制伪元素整体尺寸（见下一条）。
需要自定义编号格式（比如“第1章”）时别硬套 ::marker
ol li::marker { content: "第" counter(list-item) "章:" } 这种写法在绝大多数浏览器里都不工作——::marker 的 content 只接受简单字符串或 counter() 基本调用（如 counter(item)），不支持拼接、前缀后缀或函数嵌套。
真要实现“第1章”这类格式，得退回到手动计数器 + ::before：
ol {
list-style: none;
counter-reset: chapter;
}
ol li {
counter-increment: chapter;
}
ol li::before {
content: "第" counter(chapter) "章：";
color: #3a7ebf;
font-weight: bold;
margin-right: 0.5em;
}
这样写才能保证兼容性、语义清晰，且样式完全可控。记住：::marker 是轻量级微调工具，不是万能编号引擎。
真正难的不是怎么写，而是判断什么时候该停手——看到 ::marker 不起作用，别反复调参数，先查浏览器版本，再决定是升级环境还是换方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
