Html 如何更改无序列表中点的颜色？

我想更改无序列表中点的颜色：

有没有一种方法可以用CSS实现这一点？我看不到属性？

最简单（但相当不神秘）的方法是将内容包装在

span

标记中，然后将项目符号颜色应用于

li

，将文本颜色应用于

span

代码：

正文
正文
正文

ulli{
/*子弹颜色*/
颜色：红色；
列表样式类型：disc；
}
李斯潘{
/*文本颜色*/
颜色：黑色；
}

如果您不能修改HTML，您可以使用带有自定义彩色点的

列表样式图像

，或者使用生成的内容（即

li:before

）并相应地对其着色（但要注意列表项目符号位置问题）

这是：

---

您可以创建自己的图像

li {
    list-style-image: url(myImage.gif);
}

---

我认为您必须使用图形：

---

另一方面，这还将使您能够精确控制子弹的位置（通过使用边距和图像偏移）。

进一步完善@BoltClock给出的答案：

ul li {
    color: black;
    list-style-type: none;
}

ul li:before {
    color: red;
    float: left;
    margin: 0 0 0 -1em;
    width: 1em;
    content: '\2022';
}

---

这样，多行项目符号的所有行都可以正确缩进。注意：我还没有机会在IE上测试它

上面的答案都不适合我，因为我的内容被包装成了多行。然而，W3C提供的解决方案是完美的：

简而言之，删除样式：

ul {list-style: none}

然后加入你自己的子弹

li::before {
content: "•";
color: red;
display: inline-block;
width: 1em;
margin-left: -1em
}

---

关键点是内联块、宽度和边距，以便正确定位。

我正在寻找无图像解决方案。希望有人知道。谢谢。我在找一个没有图像的解决方案。希望有人知道。谢谢，谢谢。我会记为正确的，但如果你不介意的话，你可以解释一下李：之前。这是否意味着我不必使用span。位置会有什么问题。非常感谢这个解决方案的最大问题是它不能正确地与多行项目符号一起工作。第二行没有缩进。@Stuart McCoy:是的，这很痛苦。我记得有一个类似问题的另一个答案试图绕过这个问题，但我手头上还没有一个链接。你的第一个解决方案非常适合那些不能依赖E:before（比如在电子邮件中）的人。非常感谢。这在iphone上不起作用，它将使用iphone表情符号。通过设置

li{margin left:1em}

来抵消项目符号，也可以缩进整个

li

元素。这样，项目符号就会与周围的文本/段落对齐。

li::before {
content: "•";
color: red;
display: inline-block;
width: 1em;
margin-left: -1em
}