终于，更改列表符号颜色变得简单了

在我萌芽的岁月里，普遍的建议是这样的

<ul>
  <li><span>List item</span></li>
  <!-- ... -->
</ul>

li { color: red; } /* bullet */
li span { color: black; } /* text */

还不错，但也不算好。 您正在 span 级别“重置”所有内容，因此操作越多，就越复杂。

事情正在变得越来越容易。 让我们一边走一边踏入这个越来越现代的世界。

---

另一种方法是剥离默认的列表样式，并将其替换为伪元素。

ul {
  list-style: none;
}

li::before {
  content: "• ";
  color: red;
}

如果需要计数，我们可以使用 CSS 计数器。

ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}

ol li {
  counter-increment: my-awesome-counter;
}

ol li::before {
  content: counter(my-awesome-counter) ". ";
  color: red;
}

---

这里快速说一下：这不会改变颜色，但您可以通过设置一个字符串来指定要用于子弹的字符，例如

ul {
  list-style-type: '✽ ';
}

这是从 Firefox 39（2015 年）和 Chrome 79 开始的 (将于 2019 年 12 月 9 日发布).

对于有序列表，有许多 特定于语言的选项。 这些语言样式也适用于 CSS 计数器，您可以在 Hui Jing 的深入分析 中了解更多相关信息。

在 CodePen 上查看笔
随机 CSS 计数器游乐场 由 Chen Hui Jing (@huijing) 创建。
在 CodePen 上。

---

但一直以来，我们只想选择这个愚蠢的子弹（或任何它是什么）并对其进行样式设置。 现在我们开始能够做到这一点。

从 Firefox 68（2019 年 7 月）开始，您可以执行以下操作

li::marker {
  color: red;
  content: "►";
}

…正如您所见，这会改变颜色和子弹。 这绝对是最干净、最简单的方法，因此看到进步真是太好了。

Tejas 演示了

在 CodePen 上查看笔
::marker 示例 由 Tejas (@tejask) 创建。
在 CodePen 上。

Manuel Matuzović 指出，如果您将元素设置为 list-item 显示类型，您也可以在它们上使用标记。

h2 {
  display: list-item;
}

h2::marker {
  color: orange;
  content: "☞";
}

即使在撰写本文时，Safari 也支持此功能，因此我们应该 依靠 Chrome 来完成这项工作。