list-style-type仅支持预定义关键字，无法直接使用"★"等字符；自定义图标需用::before伪元素，编号逻辑复杂时应配合counter()，且li必须保持display:list-item。
list-style-type 不能真正自定义序号图标，它只接受预定义关键字，写 "★"、"→" 或任何字符串都会被浏览器忽略并回退到默认值。
为什么 list-style-type: "★" 完全无效
浏览器按 CSS 规范校验该属性值，仅允许枚举关键字（如 decimal、square、lower-roman），不接受字符串字面量、Unicode 字符或表达式。非法值直接被丢弃，不报错也不提示。
- 错误写法：
list-style-type: "✅"→ 渲染为disc（无序）或decimal（有序） - 即使加引号、用
\2705转义，也一样失效 -
none不等于“清空缩进”，它只隐藏符号，padding-left或margin-left仍存在，常导致文本左偏
想用 ✅、»、SVG 或任意字符？必须用 ::before
这是目前兼容性最好、控制最细的方案，支持 IE11+ 和所有现代浏览器，能精确控制颜色、大小、对齐和响应式缩放。
- 先禁用原生符号：
list-style-type: none+padding-left: 0 - 给
li设position: relative，为伪元素定位打基础 -
li::before中用content: "✅"或content: "■"，配合position: absolute; left: 0; - 若需多行文本垂直居中对齐，加
top: 50%; transform: translateY(-50%) - 避免用
margin-left控制间距，改用padding-left配合left值更可靠
需要带前缀的编号（如 “Step 1”、“2.3.1”）？用 CSS counter()
当要跳号、嵌套、加文字前缀或跨列表连续计数时，counter 是唯一可靠路径，list-style-type 完全无能为力。
- 父容器（如
ol）设counter-reset: step-counter - 每个
li设counter-increment: step-counter -
li::before中写content: "Step " counter(step-counter) ": " - 必须同步清除原生序号：
ol { list-style: none; }，否则出现双编号 - 嵌套编号用
counters(step, ".")，且父级需独立counter-reset
::marker 看似简洁，但实际限制太多
它是 CSS Pseudo-Elements Level 4 新特性，Chrome 89+/Firefox 89+/Safari 15.4+ 支持，但 iOS 15.3 以下、Android 10 WebView 基本不可用。
-
content: attr(data-bullet)动态读取仅 Firefox 支持，Chrome/Safari 忽略 - 不支持
background、border、display（强制 inline） - 换行时垂直对齐容易错位，而
::before可用transform精确修正 - 真要兼容旧环境，
::marker必须降级为::before方案
最易被忽略的一点：无论用 counter 还是 ::before，都必须确保 li 的 display 是 list-item；设成 block、flex 或 grid 会直接切断序号渲染链，连 list-style-type 都不生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
