html实现小圆点颜色切换

要实现小圆点颜色切换，可以使用CSS的伪类选择器来设置特定状态下的样式。可以使用以下代码实现：

/* 设置未选中状态下的样式 */
ul li {
    list-style-type: none;
    background-color: gray;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin-right: 5px;
}
/* 设置选中状态下的样式 */
ul li.active {
    background-color: red;
}

然后，在HTML代码中添加一个无序列表，用li元素表示每个小圆点。

<ul>
    <li class="active"></li>
    <li></li>
    <li></li>
</ul>

其中，class="active"表示当前选中的小圆点，可以通过JavaScript动态地添加和移除该类来实现颜色切换。