javascript - 交替元素符号列表颜色

Question

有谁知道是否可以为网站上的所有列表动态更改无序列表元素符号的颜色？

例如列表中的第一个元素符号是绿色的，第二个元素符号是蓝色的，第三个元素符号是橙色的等等。

我试过在这里使用 JQuery，但是不可能定位到 :before 伪元素。

<p> Shopping List </p>
<ul>
  <li>Jalapeños</li>
  <li>Milk</li>
  <li>Eggs</li>
</ul>

Answer 1

考虑以下 CSS 样式。

ul.colored {
  list-style: none;
}

ul.colored li.blue-bullet::before {
  content: "\2022";
  color: blue;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

ul.colored li.orange-bullet::before {
  content: "\2022";
  color: orange;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

ul.colored li.green-bullet::before {
  content: "\2022";
  color: green;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

<p> Shopping List </p>
<ul class="colored">
  <li class="blue-bullet">Jalapeños</li>
  <li class="green-bullet">Milk</li>
  <li class="orange-bullet">Eggs</li>
</ul>

如果您想使用 JS/jQuery 执行此操作，您可以在 Span 中创建新的元素符号并以这种方式设置它的样式。

引用:https://www.w3schools.com/howto/howto_css_bullet_color.asp