li::marker样式不生效主因是前提未满足：list-style不能设为none（须用list-style-type: none）、li必须保持display: list-item、旧版浏览器（如safari 15.3前）完全忽略该伪元素；color需显式声明或加!important；content仅支持字符串字面量、counter()等有限值，禁用url()；仅允许color、font-size等少数属性，禁用margin、background等布局属性；兼容方案应优先::marker再回退list-style: none + ::before。
直接用 ::marker 改符号最省事，但写了没反应、颜色不生效、换行错位——八成不是代码写错了，而是前提条件没卡准或属性越界了。
为什么 li::marker 样式完全不生效
它根本不是“写了就渲染”的通用机制，浏览器连进入 ::marker 渲染流程的门槛都没过：
-
ul或ol上写了list-style: none—— 这会直接砍掉 marker 生成逻辑，::marker规则压根不计算；得改成list-style-type: none才留出接管入口 -
li的最终display计算值不是list-item—— 比如父容器是display: flex、li被设为display: block，或被 CSS-in-JS 动态覆盖 - 目标浏览器不支持：
Chrome 85、Firefox 79、Safari 15.3及更早版本静默忽略整个规则，DevTools 里都看不到::marker面板 -
color看似无效，其实是被父级color继承覆盖了，得加!important或提高选择器权重（比如ul li::marker）
li::marker { content: ... } 怎么写才不翻车
content 是唯一能替换符号形态的出口，但限制极严，不是所有字符串都能用：
- 只接受纯字符串字面量（如
"→ "）、counter(list-item)、counters()，不能用url()、attr()、HTML 片段或拼接表达式 - 写
content: "•"容易错位，优先用 Unicode 编码：content: "\2022"（实心圆）、content: "\27A4"（右箭头） - 想加空格或标点，必须手动写进字符串里：
content: counter(list-item) ". "，而不是靠margin推 -
ul下content支持有限，某些旧版 Safari 会直接 fallback 到默认圆点；ol更稳，可安全用counter(list-item, lower-roman)
::marker 能改哪些样式、哪些绝对别碰
它不是普通伪元素，浏览器只放行极少数属性：
- ✅ 安全可用：
color（最稳）、font-size（Chrome 110+/Safari 16.4+起稳定）、font-family（部分浏览器忽略）、text-shadow（实验性） - ❌ 一律无效：
margin、padding、background、border、display、transform、line-height、vertical-align - ⚠️ 小心使用：
font-weight在Safari 16.4+才支持；font-variant-numeric仅Chrome 115+支持，Firefox不认 -
::marker不继承父li的font和color，必须显式写color: inherit、font-size: inherit才对齐
兼容老浏览器时怎么兜底
别指望 @supports selector(::marker) —— 它在 Safari 15.3 及更早版本里根本检测不到：
- 先写
::marker样式作为现代浏览器增强 - 再用
li的text-indent+padding-left微调整体缩进，避免符号偏移失衡 - 若必须支持老环境，退回到
li::before { content: "• "; }方案（但会丢失语义和屏幕阅读器对列表结构的识别） - 真正容易被忽略的是：当
li内容换行时，::marker的对齐方式由list-style-position控制（inside或outside），而这个属性依然有效——别以为用了::marker就能绕过它
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
