Disc 与 Circle 列表样式的基础差异
形状与可视效果
在前端开发中，Disc（实心圆点）和 Circle（空心圆圈）是最常用的两种无序列表标记类型。它们的视觉差异不仅影响美观，也影响信息的分层感。Disc 是 实心圆点，通常在大多数设计中更为稳重；Circle 是 空心圆圈，视觉对比更柔和，便于在视觉层级较多的页面中保持清晰。
在网页的默认外观中，两者的间距和对齐与文本行高相关，默认缩进和标记位置往往相似，但不同的浏览器对圆点的占用宽度略有差异。了解这一点有助于在自定义组件时避免错位。
/* HTML/CSS 示例：Disc 与 Circle 的初始样式对比 */
ul.disc { list-style-type: disc; }
ul.circle { list-style-type: circle; }
为了在实际页面中达到更一致的表现，通常需要通过 CSS 重置和自定义变量来确保跨浏览器的一致性。通过一次性设置 list-style-type，可以快速实现两种标记的切换。
场景适用性
在不同的场景中，Disc 与 Circle 各有优势。导航菜单、功能清单、文档结构中的要点列表常见使用 Disc，以呈现更强的主体感；而 Circle 则在要点等级较多、需要更温和的视觉分隔时更为友好。通过合理切换两者，可以提高页面的易读性和信息层级。
在实际布局中，通常会把 Disc 与 Circle 放在并列的示例中，以便设计师快速比较它们对排版的影响。下面给出一个嵌套结构的对比，便于理解不同层级的缩进和标记呈现。
<!-- Disc 与 Circle 的嵌套对比结构 -->
<ul class="disc-list"><li>一级要点<ul class="circle-list"><li>二级要点</li><li>二级要点</li></ul></li>
</ul>
<ul class="circle-list"><li>一级要点<ul class="disc-list"><li>二级要点</li><li>二级要点</li></ul></li>
</ul>
/* 嵌套对比的基本样式 */
ul.disc-list { list-style-type: disc; padding-left: 1.5rem; }
ul.circle-list { list-style-type: circle; padding-left: 1.5rem; }
ul.disc-list ul.circle-list { padding-left: 1.5rem; }
浏览器渲染与无障碍性
浏览器行为差异
不同浏览器对 list-style-type 的实现存在细微差异，尤其在字体、缩进和边距计算方面。因此在跨浏览器开发中，建议统一父元素的 padding-left 和 margin-left，避免标记与文本之间出现对不齐的情况。
一个常见做法是，统一设置 list-style-position 为 outside，再通过 padding-left 控制视觉缩进，确保在主流浏览器中表现一致。
/* 统一标记位置和缩进示例 */
ul { list-style-position: outside; padding-left: 1.5rem; }
无障碍与屏幕阅读器
无障碍体验要求保留语义结构，屏幕阅读器会按顺序读取列表项文本，无论是 Disc 还是 Circle，语义不变。避免通过隐藏标记或改变结构来替代标记，否则会让辅助技术的解析发生错乱。因此，保持 HTML 语义化和合理的 ARIA 属性 是关键。
下面给出一个无障碍友好的示例，其中保留了清晰的语义结构并提供额外的描述信息。
<nav aria-label="主导航"><ul class="disc-list" aria-label="站点页导航"><li>首页</li><li>产品</li><li>联系</li></ul>
</nav>
实现与样式控制要点
列表样式与位置
通过 list-style-type 可以快速在 Disc、Circle 之间切换；若需要更精准的文本对齐，可以结合 list-style-position 与 padding-left 调整视觉缩进。对于需要左对齐文本的场景，使用内联样式或 CSS 变量进行统一管理，能确保一致性。
下面给出一个综合示例，展示如何在同一页面中对 Disc 与 Circle 进行统一控制。
/* 同页对比：Disc 与 Circle 的统一控制 */
ul.disc-list { list-style-type: disc; list-style-position: outside; padding-left: 1.5rem; }
ul.circle-list { list-style-type: circle; list-style-position: outside; padding-left: 1.5rem; }
嵌套列表与层级对齐
对于多层级的列表，嵌套时要注意父级与子级的缩进关系。保持一致的缩进单位（如 1.5rem）可以避免错位，同时通过逐级调整 padding-left 来实现层级对齐。
示例中，Disc 与 Circle 的嵌套不应破坏视觉层级，建议对每一层都应用同样的缩进原则。
/* 层级对齐示例 */
ul.disc-list { list-style-type: disc; padding-left: 1.5rem; }
ul.disc-list ul { padding-left: 1.5rem; }
ul.circle-list { list-style-type: circle; padding-left: 1.5rem; }
ul.circle-list ul { padding-left: 1.5rem; }
通过 CSS 自定义圆点颜色与尺寸
现代浏览器支持 ::marker 伪元素，允许直接控制标记的颜色和尺寸，从而在 Disc 与 Circle 上实现更细粒度的美学定制。请注意兼容性，如需向后兼容请采用传统的 text color 继承方式。
下面演示如何通过 ::marker 修改圈点的颜色和尺寸，以实现区域风格化。
/* 使用 ::marker 自定义符号样式（现代浏览器支持） */
ul.custom-disc li::marker { color: #e74c3c; font-size: 0.95em; }
ul.custom-circle li::marker { color: #3498db; font-size: 0.95em; }
实战应用案例
网页导航列表
在网页导航中，Disc 常用于强调主导航项的可点击性，Circle 则可用于次级导航或辅助链接，帮助区分层级并提升辨识度。为不同导航层级应用不同的标记类型，是一种直观的视觉分层策略。
示例结构展示如何在导航中同时使用 Disc 与 Circle：
<!-- 导航示例：Disc 主项，Circle 次级项 -->
<nav aria-label="主导航"><ul class="nav-disc"><li>首页</li><li>产品<ul class="nav-circle"><li>解决方案</li><li>定制开发</li></ul></li><li>联系</li></ul>
</nav>
/* 导航样式设置 */
.nav-disc { list-style-type: disc; padding-left: 1.5rem; }
.nav-circle { list-style-type: circle; padding-left: 1.5rem; }
内容块列表
在文章页面或功能点列表中，Disc 能传达相对强的要点感，Circle 则更柔和，适合段落式信息的分隔。通过合理组合，可以提升可读性与信息分布的层次感。
如下示例展示了在文章要点区块中应用 Disc 与 Circle 的搭配：
<section aria-label="要点区块"><ul class="disc-list"><li>要点一：高亮要点</li><li>要点二：易读性提升</li></ul><ul class="circle-list"><li>附加要点A</li><li>附加要点B</li></ul>
</section>
/* 内容区块样式 */
.disc-list { list-style-type: disc; padding-left: 1.5rem; }
.circle-list { list-style-type: circle; padding-left: 1.5rem; }
代码示例与对比
基本示例
以下展示了最常见的直接对比，包含 Disc 与 Circle 的基本 HTML 结构和对应的 CSS 样式。通过对比可以快速理解两者在视觉上的差异。
<!-- 两种标记对比 -->
<ul class="disc"><li>要点 1</li><li>要点 2</li><li>要点 3</li>
</ul><ul class="circle"><li>要点 1</li><li>要点 2</li><li>要点 3</li>
</ul>
/* 基本对比样式 */
ul.disc { list-style-type: disc; padding-left: 1.5rem; }
ul.circle { list-style-type: circle; padding-left: 1.5rem; }
可访问性示例
在强调可访问性时，仍需保留语义结构，不应通过隐藏标记或替换结构来实现美观，而是通过标记和文本的清晰排版来达到目标。
<ul aria-label="功能要点"><li>快速加载</li><li>跨浏览器兼容</li><li>易维护</li>
</ul>
/* 保留语义同时美观呈现 */
ul{ list-style-type: disc; padding-left: 1.5rem; }
