HTML5已废弃ul的type属性，应使用CSS的list-style-type控制圆点形状；它仅支持disc、circle、square等值，不控制颜色和大小；需用::marker或::before实现样式定制；嵌套列表会自动降级符号，须显式重写。

ul 的 type 属性根本不起作用

你在

里写的 type 属性，浏览器直接忽略——HTML5 已将其废弃，连 warning 都不抛。哪怕你写成 type="circle" 或 type="disc"，渲染结果永远是默认实心圆点（disc），且无法通过它控制颜色、大小或对齐。

list-style-type 是最简可靠的形状控制方式

想换圆点样式，唯一稳定方案是用 CSS 的 list-style-type。它支持的值明确、跨浏览器一致：

• disc：实心圆点（默认，黑色，尺寸由字体大小决定）
• circle：空心圆圈
• square：实心方块
• none：彻底隐藏符号，常作为自定义起点

示例：

直接生效；若用 class，则写 .menu { list-style-type: circle; }。

圆点颜色和大小不能靠 list-style-type 控制

list-style-type 只管形状，不碰颜色、粗细或垂直对齐。常见误区是以为设了 color: red 就能让圆点变红——部分浏览器会继承，但不可靠。真正可控的做法只有两种：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 用 ::marker 伪元素：支持 color、font-size、content，例如 li::marker { color: #e74c3c; font-size: 1.2em; }
• 用 li::before 完全重绘：可加背景、边框、动画，但需手动处理定位和行高对齐
• 避免用 list-style-image：图片路径易出错，缩放难控制，且无法动态换色

嵌套列表时圆点样式会自动降级

当你在 li 里再套一层 ul，浏览器默认会给子列表换一种符号（比如外层 disc，内层自动变成 circle，再内层变成 square）。这不是 bug，而是 UA stylesheet 的默认行为。如果你需要统一风格，必须显式重写：

ul ul { list-style-type: disc; } 或更精确地 ul > li > ul { list-style-type: square; }。否则，视觉层级容易混乱，尤其在多级导航菜单中。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！