::marker { color: red; } 没反应是因为三个前提未同时满足：ul/li设了list-style:none、li的display非list-item，或浏览器不支持（Chrome 86+/Firefox 68+/Safari 15.4+）；仅color属性最稳定，font-size等有兼容陷阱，content只认双引号字符串，margin/padding无效，间距需靠padding-left或text-indent调整。
li::marker { color: red; } 没反应，先查这三个硬性条件
写了样式却没效果，不是代码写错，而是 ::marker 根本没被浏览器创建。它依赖三个同时成立的前提，崩一个就静默失效：
-
ul或li不能设list-style: none—— 这会直接关闭标记渲染通道；得保留list-style-type: disc（或默认） -
li的计算display值必须是list-item—— Flex/Grid 父容器、CSS-in-JS 覆盖、手动设display: block都会破坏它 - 浏览器版本要够新：Chrome 86+、Firefox 68+、Safari 15.4+（iOS Safari 15.4 起才支持，15.3 及更早完全忽略整条规则）
验证方法：DevTools 里选中 li，看 Styles 面板有没有 ::marker 面板；没有，说明前提不满足。
color 是唯一真正稳的属性，font-size 有兼容陷阱
color 在所有支持 ::marker 的浏览器中都生效，且优先级高于继承值。但 font-size 不同：
- Chrome 100+ / Firefox 98+ 稳定支持
- Safari 16.4+ 才开始有限支持，15.4–16.3 中部分机型可能不渲染
- 单独写
font-family: sans-serif会失效，必须包进font简写里，比如font: bold 1.2em sans-serif -
font-weight在 Safari 16.4+ 才支持，旧版写了等于白写
示例安全写法：li::marker { color: #e53e3e; font: bold 1.1em system-ui; }
content 替换圆点只认双引号字符串，别碰 url() 或变量
想把实心圆换成箭头或星号，只能靠 content，但它接受范围极窄：
- ✅ 正确：
content: "\2022";（Unicode 实心圆）、content: "→ ";（末尾带空格防粘连） - ❌ 错误：
content: "•" ;（分号前多空格）、content: '•'（单引号在某些构建流程中被删）、content: url(./dot.svg)（所有浏览器都不支持） - ⚠️ Emoji 如
"★"在 Firefox 中宽度不均，可加font-size: 0.9em微调对齐
content 不接受 attr()、var(--dot)、拼接表达式，也不支持 counter()（无序列表无内置计数器）。
间距没法用 margin/padding 调，得从外部下手
::marker 不支持 margin、padding、background、border——写了也不报错，就是不生效。调整圆点和文字距离只有两个正路：
- 用
ul的padding-left控制整体缩进 - 用
li的text-indent或padding-left配合list-style-position: inside（注意：该属性对::marker本身无效，只影响原生符号布局）
最易被忽略的一点：符号与文字之间的物理间距是 UA 样式硬编码的，::marker 和 list-style-position 都动不了它。真要精确控制，只能降级用 li::before + position: absolute。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
