最后，很容易更改列表子弹的颜色

在我发芽的几年中，一般的建议是：

• 列表项目

 li {颜色：红色; } / *子弹 * /
li跨度{颜色：黑色; } /* 文本 */

并不可怕，但不是很好。您正在“重置”跨度级别的所有内容，因此您做的越多，它就会变得更加复杂。

事情变得越来越容易。让我们漫步在这个世界上，随着我们的发展而变得更加现代。

另一种选择是删除默认列表样式并用伪元素替换。

 ul {
  列表风格：无；
}

li :: {
  内容： ”• ”;
  颜色：红色；
}

如果需要计算，我们可以使用CSS计数器来做到这一点。

 ol {
  列表风格：无；
  反静音：my-Awone-counter；
}

oli {
  反插入：My-Awone-Counter；
}

ol li :: {
  内容：计数器（My-Awone-counter）”。
  颜色：红色；
}

在这里快速旁边：这无助于颜色，但是您可以通过设置字符串来指定要为子弹使用的字符，例如：

 ul {
  列表式型：'✽';
}

这是Firefox 39（2015）和Chrome 79（2019年12月9日）。

对于有序列表，有大量特定语言的选项。这些语言风格也适用于CSS计数器，您可以在Hui Jing的深入潜水中了解更多信息。

但是，一直以来，我们只想选择愚蠢的子弹（或任何东西）并进行样式。现在，我们开始能够做到这一点。

从Firefox 68（2019年7月）开始，您可以喜欢：

 Li :: Marker {
  颜色：红色；
  内容：“►”；
}

……如您所见，这绝对是最干净，最简单的方法，它改变了颜色和子弹事物，因此很高兴看到进度。

Tejas证明：

ManuelMatuzović指出，如果您将元素设置为列表信息显示类型，则也可以在其上使用标记。

 H2 {
  显示：列表项目；
}

H2 :: Marker {
  颜色：橙色；
  内容：“☞”；
}

即使在撰写本文时，野生动物园也得到了支持，因此我们应该在这里依靠Chrome。

此浏览器支持数据来自Caniuse，其中有更多详细信息。一个数字表明浏览器在该版本及以上支持该功能。

桌面

移动 /平板电脑

以上是最后，很容易更改列表子弹的颜色的详细内容。更多信息请关注PHP中文网其他相关文章！