list-style-type未生效主因是li元素display值非list-item，如父元素设flex/grid导致脱离列表上下文；需检查computed样式并手动设li{display:list-item}，禁用ul/ol的flex布局。
list-style-type 为什么没生效
直接写 list-style-type: circle 却看不到圆圈？大概率是父元素用了 display: flex 或 display: grid，导致 <li> 脱离了列表上下文，list-style-type 失效。浏览器只对 display: list-item（默认值）的元素渲染项目符号。
检查方法：打开开发者工具，选中 <li>，看 computed 样式里 display 是否还是 list-item。如果不是，就得手动恢复：
li {
display: list-item;
}
- 别在
<ul></ul>或<ol></ol>上设display: flex—— 改用flex容器包一层<div> <li> <code>list-style-type对<dl></dl>无效，它压根没有项目符号概念 - 某些重置 CSS（如 normalize.css）会清掉默认
margin-left，导致符号“看不见”，实际是缩进没了
用 list-style-image 替换符号但图片不居中
list-style-image 的图片默认按基线对齐，文字高矮不一就会显得歪斜。这不是 bug，是 CSS 早期为兼容文本流设计的行为。
可靠解法是放弃 list-style-image，改用伪元素 + background-image：
li {
position: relative;
padding-left: 24px;
}
li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
background: url("dot.svg") no-repeat center;
background-size: contain;
}
- 用
top: 50%+transform: translateY(-50%)垂直居中，比vertical-align更可控 - 避免用 PNG 图片做符号——缩放易发虚；优先用 SVG 或 CSS 渐变生成
-
list-style-image不支持尺寸缩放，也不能设置重复/定位，灵活性远不如伪元素
有序列表（ol）怎么跳过编号或自定义起始值
<ol></ol> 默认从 1 开始，但实际场景常需要从 5、100 或字母 d 开始。别手动写 <li value="5"> —— 它只影响当前项，后续仍按默认规则递增，容易出错。
正确做法是用原生属性：
- 数字起始：
<ol start="7"></ol>→ 第一项显示 “7.” - 字母序列：
<ol type="a" start="4"></ol>→ 第一项是 “d.”（a=1, b=2, c=3, d=4） - 罗马数字：
<ol type="I" start="3"></ol>→ 第一项是 “III.” - 注意：
start只接受整数，type="a"下start="4"才对应字母 d；start="0"会被忽略
响应式项目符号缩放失真怎么办
用 rem 或 % 控制 list-style-image 尺寸时，符号大小不会随文字缩放，尤其在移动端小屏下容易糊或太小。
根本原因是 list-style-image 不响应 font-size 变化。解决方案只有两个方向：
- 彻底弃用
list-style-image，全部改用伪元素 +background-size: 1em 1em（1em = 当前字号） - 若坚持用
list-style-image，就配合媒体查询硬切不同尺寸图片：@media (max-width: 480px) { li { list-style-image: url("dot-sm.svg"); } } - SVG 符号记得加
viewBox属性，否则缩放会裁剪
最省心的做法其实是用 CSS 画符号：比如 li::before { content: "•"; font-size: 1.2em; } —— 简单、可继承、无加载延迟，也避开了所有图片路径和尺寸陷阱。
