ul的list-style-type合法且兼容性好的值为disc、circle、square和none；其中disc为默认值，circle和square分别表示空心圆与实心方块，none可隐藏标记但需配合padding/margin清除缩进。
ul的list-style-type有哪些合法值
HTML中ul默认显示实心圆点（disc），但list-style-type可设的值不止这一个，且不同值在不同浏览器/渲染引擎下表现略有差异。关键不是“有哪些”，而是“哪些真正可用、兼容好、不踩坑”。
常用且广泛支持的取值包括：disc（实心圆）、circle（空心圆）、square（实心方块）。这三个在所有现代浏览器和IE8+都稳定生效。
其他如decimal、lower-roman等属于ol更常用的类型，用在ul上虽不报错，但语义错乱，CSS校验器会警告，也不建议混用。
特别注意：none是合法值，作用是彻底隐藏标记——但它只删标记，不删缩进。若想连缩进也去掉，得额外配padding-left: 0或margin-left: 0。
立即学习“前端免费学习笔记（深入）”；
用CSS改ul圆点颜色和大小行不行
不行。list-style-type只控制形状，不控制颜色、大小、间距。圆点颜色继承父元素的color，但这个“继承”不可靠：比如Chrome里disc圆点颜色确实随color变，而Safari有时会固执地用深灰；square在部分Android WebView里甚至始终是黑色，不受color影响。
要精确控制外观，必须放弃list-style-type，改用list-style: none + ::marker伪元素（较新）或::before模拟：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
ul {
list-style: none;
padding-left: 0;
}
ul li::marker {
content: "•";
color: #007bff;
font-size: 1.2em;
}
但注意：::marker在IE和旧版Edge完全不支持，生产环境需查CanIUse确认目标用户覆盖率。
list-style-type设成自定义图片要注意什么
用list-style-image可以替换成图片，但实际落地常翻车：
-
list-style-image优先级高于list-style-type，一旦设了图片，type值就失效 - 图片路径出错时，浏览器不会 fallback 到
disc，而是直接不显示标记（空白） - 图片默认按原尺寸渲染，容易和文字行高不匹配，需配合
background-size或用background+::before手动对齐 - SVG图标路径要确保是内联或CORS友好，否则在某些HTTPS页面会因跨域被拦截
更稳的做法是弃用list-style-image，统一用background-image + padding-left模拟：
ul li {
background: url("dot.svg") no-repeat left center;
background-size: 6px;
padding-left: 20px;
}
为什么有时候改了list-style-type没反应
最常见的原因是CSS优先级或继承覆盖。比如：
- 全局重置CSS（如Normalize.css）可能已把
ul设为list-style: none，你写的list-style-type被它覆盖 - 父容器设置了
list-style: square inside，这种简写会覆盖子元素单独设的type - 用了
!important但拼错属性名，比如写成list-style-typ，浏览器静默忽略 - 元素被JavaScript动态添加，而CSS规则在DOM就绪前已计算完毕，需检查是否样式注入时机问题
调试时优先用浏览器开发者工具检查“Computed”面板，看最终生效的list-style整条值是什么，而不是只盯着list-style-type那一行。
圆点样式看着简单，但涉及渲染引擎差异、CSS层叠逻辑、伪元素兼容性三层暗坑，真要跨端一致，往往得绕开原生机制直接手绘标记。
