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

Question

见下图了解我的意思:)）

  <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>

来自widgetkit的代码我无法改变它。
是否可以为每个项目更改点的颜色？ （也许用css或脚本？）

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

如果我使用你的代码ovokuro，那么我遇到了这个问题： 对此有何解决方案？

Answer 1

您可以使用pseudoelement替换默认项目符号，并根据需要设置每个li的样式

li {
  list-style: none;
}

li:before {
  content: '●';
  padding-right: .5em;
}

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

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

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

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

<ul>
  <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>
  <li data-uk-slideshow-item="4"><a href="#">Love Always Wins !</a></li>
</ul>

Answer 2

.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;
}

那样的东西？