想象一个简单的无序列表，其中包含一些<li>项。现在，我通过list style将子弹定义为方形:square;然而，如果我设置<li>项目的颜色:#F00;然后一切都变成了红色!
而我只想设置方块的颜色。有没有一种优雅的方法来定义CSS中项目符号的颜色…
.．.没有使用任何精灵图像或跨度标签!
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>
CSS
li{
list-style:square;
}
当前回答
你能做的最简单的事情是将<li>的内容包装在<span>或等效的内容中，然后你可以独立地设置颜色。
或者，你也可以用你想要的项目符号颜色制作一张图片，并用list-style-image属性设置它。
其他回答
css3lists模块的当前规范确实指定了::标记 伪元素，它会做你想做的事情;FF已测试 不支持::marker，我怀疑Safari或Opera都有它。 当然，IE并不支持它。
现在，做这个的唯一方法是使用带有list-style-image的图像。
我猜你可以用span来包装一个li的内容，然后你可以设置每个的颜色，但这对我来说似乎有点笨拙。
这就行了。
li{
color: #fff;
}
你能做的最简单的事情是将<li>的内容包装在<span>或等效的内容中，然后你可以独立地设置颜色。
或者，你也可以用你想要的项目符号颜色制作一张图片，并用list-style-image属性设置它。
我建议给LI一个背景图像和左填充。list-style-image属性在跨浏览器环境中很脆弱，没有必要添加一个额外的元素，比如span。所以你的代码最终看起来是这样的:
li {
background:url(../images/bullet.png) 0 0 no-repeat;
list-style:none;
padding-left:10px;
}
最常见的做法是:
ul { list-style: none; padding: 0; margin: 0; } li { padding-left: 1em; text-indent: -.7em; } li::before { content: "• "; color: red; /* or whatever color you prefer */ } <ul> <li>Foo</li> <li>Bar</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> </ul>
JSFiddle: http://jsfiddle.net/leaverou/ytH5P/
可以在所有浏览器中运行，包括IE 8及以上版本。
