html - 按元素编号更改点导航颜色

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

您可以用 伪元素 替换默认元素符号，并根据需要设置每个 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>