::marker失效最常见原因是前提不满足：ul/li设list-style:none会关闭渲染，li的display非list-item（如被flex影响），或浏览器不支持（Safari15.3及更早静默忽略）；仅color、font-size等少数属性有效，间距需用padding-left或text-indent调整。
::marker 能直接换掉 ul 的圆点，但必须满足三个前提：浏览器支持、list-style-type 不能是 none、li 保持 display: list-item。
为什么 ul li::marker { color: red; } 完全没反应
最常见原因不是代码写错，而是前提崩了：
- ul 或 li 上写了
list-style: none—— 这会彻底关闭 ::marker 渲染，得改成list-style-type: disc（或其他内置值）才留出介入空间 - li 的计算
display值不是list-item—— 比如父容器用了display: flex，或 CSS-in-JS 动态覆盖了 display 属性 - 浏览器根本不支持：Chrome 85、Firefox 79、Safari 15.3 及更早版本会静默忽略整条规则，DevTools 里都看不到 ::marker 面板
- 写了
color: red却没生效？可能是被父级color继承覆盖，得加!important或提高选择器权重（如ul li::marker）
content 怎么写才不翻车
content 是唯一能“换掉”圆点的出口，但语法极其敏感，多一个空格、少一个引号就失效：
- ✅ 正确写法：
ul li::marker { content: "• "; color: #555; font-size: 1.1em; }（注意空格在引号内，且无多余符号） - ❌ 错误写法：
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+ 稳定，Safari 16.4+ 有限支持）、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—— 改ul的padding-left或li的text-indent
兼容老浏览器时怎么兜底
别指望 @supports selector(::marker) —— 它在 Safari 15.3 及更早版本里根本检测不到。真正稳妥的做法是双轨并行：
- 先写 ::marker 样式作为现代增强：
ul li::marker { content: "▶ "; color: #e63946; } - 再用
list-style: none+li::before兜底：ul { list-style: none; } ul li::before { content: "• "; margin-right: 8px; } - 注意：用
::before方案会丢失语义和屏幕阅读器识别，仅用于必须兼容 iOS 16 或微信内置浏览器的场景
真正容易被忽略的是：当 li 内容换行时，::marker 的对齐方式由 list-style-position 控制，而这个属性本身不作用于 ::marker，只影响原生符号布局 —— 换行对齐问题得靠 text-indent 和 padding-left 组合微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
