ul li::marker { color: red; } 无反应的主因是 list-style: none 关闭了标记渲染、li 的 display 不为 list-item，或浏览器不支持（如 safari 15.3 及更早）；需同时满足：不设 list-style: none、li 保持 display: list-item、使用 chrome 85+/firefox 79+/safari 16.4+。
为什么 ul li::marker { color: red; } 没反应？
最常见原因不是写法错，而是前提崩了：list-style: none 会直接关闭 ::marker 渲染；li 的计算 display 值不是 list-item（比如被 flex 父容器影响）；或浏览器根本不支持——Safari 15.3 及更早版本静默忽略整条规则，DevTools 里都看不到 ::marker 面板。
必须同时满足三个条件：ul 或 li 不能设 list-style: none（可改用 list-style-type: disc 等保留标记）、li 保持 display: list-item、浏览器为 Chrome 85+ / Firefox 79+ / Safari 16.4+。
content 怎么写才不翻车？
content 是唯一能“换掉”圆点的出口，但语法极其敏感，多一个空格、少一个引号就失效：
- ✅ 正确：
ul li::marker { content: "• "; }（空格在引号内，无多余符号） - ❌ 错误：
content: "•" ;（分号前有空格）、content: '•'（单引号在某些构建工具中被删） - 推荐用 Unicode 编码：
content: "\2022"（实心圆）、content: "\27A4"（右箭头），避免字符编码和引号问题 - emoji 如
content: "→ "在 Firefox 中宽度不均，建议加font-size: 0.9em微调对齐 -
content不支持attr()、url()或 CSS 变量；想动态控制得靠counter(list-item)+ 自定义属性间接实现
哪些样式能生效，哪些一设就丢？
::marker 不是普通伪元素，浏览器只放行极窄的属性子集，其他统统静默丢弃（不报错也不渲染）：
- ✅ 安全可用：
color（最稳）、font-size（Chrome 100+/Firefox 98+ 稳定）、font简写（如font: 700 1.2em "SF Mono"）、text-align（仅对多字符content生效） - ❌ 一律无效：
margin、padding、background、border、transform、display、line-height、vertical-align - ⚠️ 小心使用：
font-weight在 Safari 16.4+ 才支持；font-family单独写会失效，必须走font简写
想调圆点和文字间距？别碰 ::marker 的 margin
::marker 不支持 margin 和 padding，强行写等于白写。调整间距只能从外部入手：
- 用
ul的padding-left控制整体缩进 - 用
li的text-indent微调文本起始位置 - 若需精确对齐（比如符号居中、文字左对齐），
::marker能力已到极限，该切回list-style: none+::before方案
真正复杂的需求——比如带背景色的圆点、图标字体、响应式缩放——::marker 天然不支撑，别硬扛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
