::marker { color: red } 未生效，是因为部分旧版浏览器（如旧 safari/firefox）对 ::marker 支持有限，且 ::marker 不继承 li 的 color，但可能受 ol 的 color 影响；需显式为 li::marker 设置 color 并隔离文字色，兼容性差时应降级使用 list-style-type: none + counter() 模拟。
为什么 ::marker 设置颜色没生效？
直接写 ol li::marker { color: red; } 在部分浏览器（尤其是旧版 Safari 和 Firefox 早期版本）会无效，因为 ::marker 的样式能力受限：它只接受有限的 CSS 属性，color 是支持的，但前提是列表项没有被其他规则“劫持”——比如父级 ol 或 li 上设置了 color，且未显式重置 ::marker 的继承链。
常见错误现象：::marker 颜色始终跟随 li 文本色，改了也没变。
-
::marker不继承li的color，但会继承ol的color（如果ol有显式设置） - 必须对
li::marker单独声明color，不能只靠父级color传递 - Chrome 115+、Firefox 117+、Safari 17.4+ 支持较完整；低于这些版本建议降级用
list-style-type: none+counter模拟
怎么让数字变红、文字保持黑色？
核心是切断 ::marker 和 li 内容的样式耦合。最稳妥写法是明确分离：
ol {
color: black; /* 文字默认黑 */
}
ol li {
color: black; /* 确保文字不被意外影响 */
}
ol li::marker {
color: red;
}
注意：不要在 ol 上设 color: red 期望“传染”给 marker——它可能生效，但不可靠；显式写 li::marker { color: red } 才可控。
- 若需不同层级序号不同色（如二级列表用蓝），用嵌套选择器：
ol ol li::marker { color: blue; } -
::marker还支持font-weight、font-size（相对li的字号）、content（需配合counter()） - 避免对
::marker使用display、margin、padding——这些属性不被支持
兼容性差时怎么手动模拟序号？
当目标环境包含旧版 Safari（::marker，改用 CSS counters + list-style-type: none：
ol {
counter-reset: item;
list-style-type: none;
padding-left: 0;
}
ol li {
counter-increment: item;
position: relative;
padding-left: 2em;
}
ol li::before {
content: counters(item, ".") ". ";
color: red;
font-weight: bold;
position: absolute;
left: 0;
width: 2em;
text-align: right;
}
这个方案完全可控，但要注意：
-
counters(item, ".")用于多层嵌套（如1.1），单层用counter(item) -
::before的width和text-align: right是对齐数字的关键，否则多数字位（如10.）会挤歪文本 - 若列表内容含
inline元素，::before可能错位，此时改用display: flex布局更稳
修改数字后，序号和文字间距不自然怎么办？
::marker 本身不提供间距控制接口，它的左右空白由浏览器 UA 样式决定，无法用 margin 调整。实际中发现数字紧贴文字，是因为默认的 gap 太小。
- 唯一可靠方式：用
content替换整个 marker，并手动加空格或\a0（NBSP）li::marker { content: counter(list-item) "\a0"; color: red; } - 或者继续用
::before方案，在::before中控制width和padding-right - 不要尝试
letter-spacing或word-spacing——它们对::marker无效
真正难处理的是中英文混排时的 baseline 对齐，这时连 ::before 都可能偏移，得加 vertical-align: middle 或调整 line-height 微调——这种细节往往要真机反复试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
