::marker可直接替换列表项符号，仅作用于display:list-item的li元素，支持content、color、font系列属性，不支持margin等布局属性，需注意浏览器兼容性及list-style相关属性的互斥关系。
如何用 ::marker 替换列表项的默认符号
直接改 ::marker 就能换圆点、数字、箭头这些前缀，不用再套 <span></span> 或用 background-image 模拟。它专为列表标记设计，语义清晰，DOM 更干净。
关键限制：目前只支持 <li>、<summary></summary> 和部分自定义元素（需 display: list-item），且不能继承父级颜色/字体——必须在 ::marker 里单独设。
-
::marker只接受有限 CSS 属性：content、color、font*系列（如font-size、font-family）、text-align（仅对content有效） - 不支持
margin、padding、background、transform等布局类属性 -
content值可以是字符串（"▶ "）、计数器函数（counter(list-item, lower-roman)），或none（彻底隐藏符号）
::marker 的 content 值怎么写才不出错
写错 content 是最常见的失败原因。浏览器会静默忽略非法值，看起来像没生效。
- 用引号包裹字符串：
content: "•";✅，content: •;❌（会被当语法错误丢弃） - 调用计数器时，必须先用
counter-reset初始化：ol { counter-reset: list-item; }，否则counter(list-item)返回空 - Unicode 符号要确保字体支持，比如
"★"在某些系统中可能 fallback 成方框，可加font-family: "Segoe UI", sans-serif; - 想保留原有编号逻辑但只改样式？别重写
content，直接用color和font-size调整即可
和传统 list-style 写法的兼容性差异
::marker 不是 list-style 的增强版，而是并行方案。两者混用时，list-style 仍控制整体行为（比如 list-style-position: inside 影响文本缩进），而 ::marker 只管符号本身渲染。
-
list-style-type: none会禁用::marker——即使你写了li::marker { content: "→"; }，也不会显示 -
list-style-image和::marker互斥：只要设了前者，后者完全失效 - 旧浏览器（Chrome ::marker，得用
list-style-type+list-style-image回退 - 如果需要兼容 IE，只能放弃
::marker，老老实实用li:before模拟
为什么有时候 ::marker 看不见符号
不是代码写错了，大概率是三个隐藏条件没满足：
-
<li>的display必须是list-item（默认值），如果被其他样式覆盖成block或flex，::marker直接不触发 - 父容器是
<ul></ul>或<ol></ol>才有默认计数上下文；如果是div > li，需手动加counter-reset和counter-increment - CSS 优先级问题：某个外层规则用了
!important强制list-style: none，会直接压制::marker
真正麻烦的是嵌套列表里的计数器作用域——子 <ol></ol> 默认不会继承父级计数器，得显式命名并递增，这点很容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
