ul列表项符号由css的list-style-type属性控制，默认值为disc，支持circle、square、none等有限枚举值；自定义字符或图标需禁用默认符号，改用::marker（现代浏览器）或::before伪元素实现。
UL 列表项符号由什么控制？
浏览器默认用 list-style-type 控制 ul 的符号类型（如 disc、circle、square），但这个属性只支持有限的预设值，不接受任意字符或图标。所谓 “_TYPE 属性” 并不存在于 HTML 或 CSS 标准中——这是对 list-style-type 的误称或混淆，实际没有 _TYPE 这个属性。
想用自定义符号（比如 ✅、»、• 或 SVG），该怎么做？
必须禁用默认符号，改用 ::marker 伪元素或 background-image / ::before 模拟。现代方案优先用 ::marker，但要注意兼容性：
-
::marker支持 Chrome 89+、Firefox 89+、Safari 15.4+；旧版 Safari 和 IE 完全不支持 - 它只能设置内容、颜色、字体，不能加背景、边框或定位
- 若需图标对齐微调、响应式缩放或 fallback，
::before更可控
示例（安全写法）：
ul.custom {
list-style: none;
padding-left: 0;
}
ul.custom li {
position: relative;
padding-left: 24px;
}
ul.custom li::before {
content: "?";
position: absolute;
left: 0;
color: #2563eb;
}
为什么直接改 list-style-type 无法输入任意字符？
因为 list-style-type 是语义化枚举值，不是字符串插值字段。即使写成 list-style-type: "★"，浏览器也会忽略并回退到默认 disc。CSS 规范明确限定其取值为：disc、circle、square、none 等固定关键字，不支持 Unicode 字符或自定义字符串。
- 错误写法：
list-style-type: "→"→ 无效，被丢弃 - 合法但受限：
list-style-type: decimal-leading-zero→ 仅数字类变体 - 真正自由的符号定制，必须脱离
list-style-type原生机制
用 ::marker 时容易踩哪些坑？
看似简洁，实则边界明显：
-
::marker无法设置display（强制 inline）、不能用background或border -
content中若用attr()动态读取属性，目前仅 Firefox 支持，Chrome/Safari 不行 - 当
li内含多段文本或换行时，::marker的垂直对齐可能错位，而::before可用top: 50%+transform: translateY(-50%)精确控制 - 如果项目需要支持 IE 或老版本安卓 WebView，
::marker必须降级为::before方案
复杂符号、动态内容、跨浏览器稳定输出——这些场景下，::before 虽然代码略多，反而是更少意外的选择。
