list-style-type仅能设置圆点形状（如disc、circle、square），无法单独控制颜色、大小或位置；颜色随text-color联动，尺寸不可调，精准定制须用list-style:none配合::before伪元素。
list-style-type 能改圆点形状，但改不了颜色和大小
直接用 list-style-type 只能切换预设类型：比如 disc（实心圆）、circle（空心圆）、square（方块），但它完全不支持调颜色、改尺寸、换位置。而且所有浏览器都把圆点颜色绑定在 color 属性上——你改文字色，圆点跟着变，没法单独控制。
常见错误是以为加个 font-size 就能让圆点变大，结果没用；或者给 ul 设了 color: red，发现文字和圆点一起红了，但你想让圆点蓝、文字黑，这就做不到。
-
list-style-type: disc是默认值，无需显式写 - 设成
none后必须手动重置padding-left，否则内容会左移错位 - IE 8 及更早版本不支持
list-style-type: square以外的多数值（如circle）
用 list-style-image 替换圆点图片要小心路径和 fallback
list-style-image 看似简单，实际容易踩坑：图片加载失败时，浏览器会悄悄回退到 list-style-type 的默认值（通常是 disc），而不是留白或报错，导致样式不一致。
路径必须相对 CSS 文件本身，不是 HTML 文件；如果图是 SVG，建议内联 base64 或用 url("data:image/svg+xml,...") 避免跨域或加载延迟。
立即学习“前端免费学习笔记（深入）”；
- 图片尺寸建议 ≤ 12×12px，太大容易撑开行高或遮挡文字
- 不要依赖图片自带 padding，圆点和文字间距得靠
padding-left或margin-left单独调 - 若用 PNG，注意透明背景在深色主题下可能看不见
真正可控的方式：list-style: none + ::before 伪元素
这是目前最可靠、最灵活的做法——先关掉原生圆点，再用 ::before 在每个 li 前插入自定义内容。你可以自由控制颜色、大小、对齐、动画，甚至用 emoji 或 SVG。
关键点在于：伪元素默认是 inline，要设 display: inline-block 才能调宽高；垂直对齐用 vertical-align: middle 比 top 更稳；margin-right 控制圆点与文字间距比 padding-left 更精准。
ul.custom li {
list-style: none;
position: relative;
}
ul.custom li::before {
content: "•";
color: #007bff;
font-size: 1.2em;
display: inline-block;
width: 0.8em;
height: 0.8em;
margin-right: 0.5em;
vertical-align: middle;
}
list-style 简写属性容易覆盖意外值
list-style 是简写，一次设 type、position、image。但漏写某一项就会被重置为初始值。比如只写 list-style: square;，浏览器会自动补全成 list-style: square outside none;——这意味着你原本设的 list-style-image 会被清掉。
- 除非三者都要统一控制，否则别用简写，分开写更安全
-
list-style-position: inside会让圆点进文本流，可能引发换行错乱，尤其在窄容器里 - 移动端 Safari 对
inside渲染不稳定，建议始终用outside（默认值）
list-style-type，老老实实用 list-style: none 搭配 ::before。颜色、大小、间距、对齐、响应式缩放——这些自由度，原生机制根本没留接口。 
