Html 按项目编号更改点导航颜色

请看下图以了解我的意思：）

来自widgetkit的代码我无法更改。
是否可以更改每个项目的圆点颜色？（可能使用css或脚本？）

谢谢！Pickstick.de/t-shirt-s

---

如果我使用你的代码ovokuro，那么我就遇到了这个问题：

---

任何解决方案都适用于此？

您可以使用

伪元素替换默认项目符号

，并根据需要设置每个

li

的样式

li{
列表样式：无；
}
李：以前{
内容:'●';
右侧填充：.5em；
}
li[数据英国幻灯片项目=“1”]：之前{
颜色：红色；
}
li[数据英国幻灯片项目=“2”]：之前{
颜色：蓝色；
}
li[数据英国幻灯片项目=“3”]：之前{
颜色：橙色；
}
li[数据英国幻灯片项目=“4”]：之前{
颜色：绿色；
}

您可以使用

伪元素替换默认项目符号

，并根据需要设置每个

li

的样式

li{
列表样式：无；
}
李：以前{
内容:'●';
右侧填充：.5em；
}
li[数据英国幻灯片项目=“1”]：之前{
颜色：红色；
}
li[数据英国幻灯片项目=“2”]：之前{
颜色：蓝色；
}
li[数据英国幻灯片项目=“3”]：之前{
颜色：橙色；
}
li[数据英国幻灯片项目=“4”]：之前{
颜色：绿色；
}

像这样的

---

类似的东西？

好的，但现在我遇到了一些其他问题：/如果我使用您的代码，有什么解决方案吗？问题是现有的项目符号不会隐藏？您需要使用开发工具并检查它们的来源。或者，如果项目符号出现在所有列表项之前，则需要更具体地说明所针对的列表。您可以使用

在这里，我从

ul

获得了一个类，好吧，但现在我遇到了一些其他问题：/如果我使用你的代码，有什么解决方案吗？问题是现有的项目符号不会隐藏？您需要使用开发工具并检查它们的来源。或者，如果项目符号出现在所有列表项之前，则需要更具体地说明所针对的列表。您可以使用

我从

ul

  <ul class="uk-dotnav uk-flex-center">
    <li data-uk-slideshow-item="0" class="uk-active"><a href="#">Love Always Wins !</a></li>
    <li data-uk-slideshow-item="1"><a href="#">Love Always Wins !</a></li>
    <li data-uk-slideshow-item="2"><a href="#">Love Always Wins !</a></li>
    <li data-uk-slideshow-item="3"><a href="#">Love Always Wins !</a></li>
  </ul>

.uk-dotnav ul li a{
  list-style: none;
}

.uk-dotnav   li:before {
  content: '●';
  padding-right: .5em;
  font-size:26px;
}

.uk-dotnav   li[data-uk-slideshow-item="1"]:before  {
  color: red;
}

.uk-dotnav   li[data-uk-slideshow-item="2"]:before {
  color: blue;
}

.uk-dotnav   li[data-uk-slideshow-item="3"]:before {
  color: orange;
}

.uk-dotnav    li[data-uk-slideshow-item="4"]:before {
  color: green;
}