::marker样式无效主因是浏览器兼容性（chrome 86+、firefox 89+、safari 15.4+）、仅支持有限属性（color/content/font/text-align/white-space），且content语法需严格规范。
为什么::marker设了没反应？浏览器兼容性是硬门槛
::marker不是所有浏览器都认——Chrome 86+、Firefox 89+、Safari 15.4+ 才支持，旧版 Safari（比如 15.2）或微信内置浏览器直接忽略样式。如果你改了color或content却毫无变化，先查navigator.userAgent或用@supports (::marker)做降级。
- 不支持时，
::marker规则会被整个丢弃，不会报错，也不会 fallback 到li::before -
display: none在::marker上无效，想隐藏得用content: "" - 它只作用于
<ul></ul>和<ol></ol>的直接子<li>，嵌套列表里深层<li>不自动继承
::marker能改什么？别碰font-family和margin
::marker允许修改的 CSS 属性非常有限：仅color、content、font简写（含font-size、font-weight）、text-align（仅对content生效）、white-space。其他如margin、padding、background、font-family（单独设）一律被忽略。
-
font简写可用，但font-family: "PingFang SC"单独写会失效 -
content可设为"• "、counter(list-item, upper-roman) "."，但不能引用attr()或外部资源 -
text-align: right只影响多字符 marker（比如自定义的“→”），对单字符无感
怎么让数字列表显示「1.」「2.」而不是默认空格？用content重写计数器
默认<ol></ol>的 marker 是数字加空格（1␣），想改成带点的「1.」必须用content显式拼接，不能靠list-style-type。
- 写法：
ol li::marker { content: counter(list-item) ". "; } - 注意
counter(list-item)是固定写法，不是counter(ol)或count - 如果
<ol start="5"></ol>，counter(list-item)仍从 5 开始，无需额外处理 - 想加前缀如「Step 1.」，写成
content: "Step " counter(list-item) ". ";
圆点变图标或 emoji？小心content里的空格和编码
用 emoji 或 SVG 字符当 marker 很常见，但content里多一个空格、少一个分号，或者用了未转义的引号，就会导致整个 rule 失效。
- ✅ 正确：
ul li::marker { content: "→ "; color: #333; } - ❌ 错误：
content: "→" ;（分号前多了空格） - ❌ 错误：
content: '→ '（单引号在某些构建工具里可能被误解析） - emoji 在 Firefox 中渲染宽度不一致，建议配合
font-size: 0.9em微调对齐
CSS 的::marker看着简单，但真正用稳得卡住三件事：浏览器版本、可设属性边界、content字符串的语法洁癖。漏掉任意一条，样式就静默消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
