在HTML页面开发中，列表元素是展示同类内容的高频组件，无序列表ul和有序列表ol通过li标签承载内容时，默认会带有圆点或者数字序号的bullet样式。很多时候默认的样式无法满足设计需求，我们需要对圆点样式进行自定义调整。
一、列表默认圆点样式说明
无序列表ul的默认bullet是实心圆点，有序列表ol的默认bullet是数字序号，这些默认样式由浏览器的内置样式表控制。我们可以通过CSS的list-style-type属性修改默认的bullet类型。
1. 无序列表圆点类型设置
无序列表支持的常用圆点类型有以下几种：
- disc：默认值，实心圆点
- circle：空心圆圈
- square：实心方块
- none：不显示圆点
对应的CSS设置示例如下：
/* 设置ul列表的圆点为空心圆圈 */
ul.custom-circle {
list-style-type: circle;
}
/* 设置ul列表的圆点为实心方块 */
ul.custom-square {
list-style-type: square;
}
/* 隐藏ul列表的圆点 */
ul.no-bullet {
list-style-type: none;
}
2. 有序列表序号样式设置
有序列表的bullet是序号，我们可以通过list-style-type修改序号的类型，常用的类型包括：
- decimal：默认值，阿拉伯数字1、2、3
- decimal-leading-zero：前面带0的数字01、02、03
- lower-roman：小写罗马数字i、ii、iii
- upper-roman：大写罗马数字I、II、III
- lower-alpha：小写英文字母a、b、c
- upper-alpha：大写英文字母A、B、C
对应的CSS设置示例如下：
/* 设置ol列表序号为小写罗马数字 */
ol.lower-roman-list {
list-style-type: lower-roman;
}
/* 设置ol列表序号为小写英文字母 */
ol.lower-alpha-list {
list-style-type: lower-alpha;
}
二、使用自定义图片作为圆点
如果默认的圆形、方块等样式无法满足需求，我们可以使用自定义图片作为列表的bullet，这时候需要用到list-style-image属性。
示例代码如下：
/* 使用自定义图标作为无序列表的圆点 */
ul.custom-icon {
list-style-image: url('https://ipipp.com/icon/bullet.png');
/* 如果图片加载失败，回退为实心圆点 */
list-style-type: disc;
}
需要注意的是，list-style-image对图片的大小和位置控制能力有限，如果需要更精细的调整，推荐使用下面的伪元素方案。
三、通过伪元素自定义圆点样式
使用::before伪元素可以完全控制圆点的样式，包括颜色、大小、位置、内容等，是自定义列表bullet最灵活的方式。
基础实现步骤
首先隐藏默认的列表圆点，然后通过伪元素在li标签前面生成自定义的内容作为圆点。
示例代码如下：
/* 隐藏默认圆点 */
ul.pseudo-bullet {
list-style-type: none;
padding-left: 0;
}
/* 通过伪元素添加自定义圆点 */
ul.pseudo-bullet li::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background-color: #409eff;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}
自定义图标圆点
如果需要在伪元素中使用图标，可以使用Unicode图标或者字体图标，示例如下：
/* 使用Unicode图标作为圆点 */
ul.icon-bullet {
list-style-type: none;
padding-left: 0;
}
ul.icon-bullet li::before {
content: "2714"; /* 对勾图标 */
color: #67c23a;
margin-right: 6px;
font-size: 14px;
}
四、调整圆点的位置和间距
列表圆点的位置由list-style-position属性控制，有两个可选值：
- outside：默认值，圆点在列表内容的外侧
- inside：圆点在列表内容的内侧，内容换行时会和圆点对齐
如果需要更精细的间距调整，可以结合padding-left和margin-left属性设置，示例如下：
/* 调整圆点和内容的间距 */
ul.custom-spacing {
list-style-type: disc;
list-style-position: outside;
padding-left: 20px;
}
ul.custom-spacing li {
margin-bottom: 6px;
}
五、常见问题说明
1. 设置list-style-type: none后，部分浏览器仍然显示圆点？
这是因为不同浏览器的默认样式有差异，建议在CSS重置样式中添加对列表样式的统一设置，或者给ul、ol标签显式设置list-style: none。
2. 自定义圆点不显示？
检查是否隐藏了默认的圆点，同时确认伪元素的content属性是否正确设置，display属性是否为块级或行内块级元素。
3. 有序列表如何自定义起始序号？
可以使用ol标签的start属性设置起始序号，或者通过CSS的counter计数器实现更复杂的序号自定义逻辑。