如何更改<li>项目的每个项目符号点的颜色？

Question

比方说,例如,我想要一个项目列表,每个项目的每个项目都有不同的颜色项目符号点.

踢球者是我需要相对语义和自动地做到这一点,避免用户必须添加一个类或一段HTML,同时保持文本的颜色为黑色.

一个例子:

• 列出具有红色子弹的项目
• 列出具有蓝色子弹的项目
• 列出带有绿色子弹的项目
• 等等

它提出了一个有趣的问题 - 如何做到这一点,以便用户可以简单地添加项目列表,我的代码相应地更新它们.

Answer 1

删除默认项目符号,并添加项目符号(U + 2022 BULLET或其他)作为生成的内容.您可以单独设置生成的内容的样式.这是灵活的,并且不需要额外的标记(显然区别于不同项目的某些标记之外),但是具有在旧版本的IE上失败的缺点(不支持生成的内容).

假设加价

<ul class="mixed">
  <li class="red">One.</li>
  <li class="green">Two.</li>
</ul>

样式表可以

ul.mixed {
  list-style-type: none;
}
ul.mixed li:before {
 content: "\2022";
 padding-right: 0.5em;
}
li.red:before {
  color: red;
}
li.green:before {
  color: green;
}