ul li::marker { color: red; } 没效果主因是三大前提之一失效：ul/li设了list-style: none、li的display非list-item、或浏览器不支持（safari 15.3-/firefox 67-/chrome 85-）；仅color、font-size等极少数属性有效，间距需用padding-left/text-indent调整，兼容旧环境须降级为list-style: none + li::before。
直接写 ul li::marker { color: red; } 很可能没反应——不是语法错，而是 ::marker 根本没被浏览器渲染，或者你试图设置的属性压根不被支持。
为什么 ul li::marker 写了但完全没效果
三个前提崩一个，整条规则就静默失效，DevTools 里都看不到 ::marker 面板：
-
ul或li上写了list-style: none→ 它会彻底关闭::marker的渲染通道，得改成list-style-type: disc或保留默认 -
li的计算display值不是list-item→ 比如父容器是display: flex、CSS-in-JS 覆盖了样式、或手动设了display: block - 浏览器不支持 → Safari 15.3 及更早、Firefox 67 及更早、Chrome 85 及更早全部忽略整条规则；iOS 16 / 微信 X5 内核也基本不认
content 是唯一能换掉圆点的出口，但写错一个字符就回退
content 不接受 url()、attr()、CSS 变量或拼接表达式，只认字符串字面量、counter() 或 counters()：
- ✅ 推荐写法：
content: "\2022";（Unicode 实心圆），content: "• ";（双引号内末尾带空格，防文字粘连） - ❌ 别写：
content: "•" ;（分号前多空格）、content: '•'（单引号在某些构建工具中被删）、content: url(./dot.svg)（完全不支持） - ⚠️ Emoji 如
"→ "在 Firefox 中宽度不均，可加font-size: 0.9em微调对齐
哪些样式能生效，哪些写了等于白写
::marker 不是普通伪元素，浏览器只放行极窄的属性子集，其他一律静默丢弃（不报错、不警告、也不渲染）：
- ✅ 安全可用：
color（最稳）、font-size（Chrome 100+/Firefox 98+ 稳定，Safari 16.4+ 有限支持）、font简写（如font: bold 1.2em sans-serif）、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控制整体缩进 - 用
text-indent或padding-left配合list-style-position: inside微调对齐 - 如果要精确控制符号与文字距离，老环境或复杂需求下，必须降级为
list-none + li::before
真正容易被忽略的是：哪怕你所有 CSS 都写对了，只要项目要兼容 iOS 16、Android WebView 旧版或微信 X5，::marker 就不能当唯一方案——它不是“能不能用”，而是“会不会被彻底无视”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
