想象一个简单的无序列表，其中包含一些<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;
}
当前回答
我知道这篇文章的回答有点晚了，但作为参考……
CSS
ul {
color: red;
}
li {
color: black;
}
子弹的颜色是在ul标签上定义的，然后我们切换回li颜色。
其他回答
我使用jQuery来实现这个:
jQuery('li').wrapInner('<span class="li_content" />');
&与一些CSS:
li { color: red; }
li span.li_content { color: black; }
也许有点过分，但如果你是为CMS编写代码，而你不想让编辑在每个列表项中添加额外的span，这很方便。
最常见的做法是:
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及以上版本。
我建议给LI一个背景图像和左填充。list-style-image属性在跨浏览器环境中很脆弱，没有必要添加一个额外的元素，比如span。所以你的代码最终看起来是这样的:
li {
background:url(../images/bullet.png) 0 0 no-repeat;
list-style:none;
padding-left:10px;
}
这就行了。
li{
color: #fff;
}
我知道这篇文章的回答有点晚了，但作为参考……
CSS
ul {
color: red;
}
li {
color: black;
}
子弹的颜色是在ul标签上定义的，然后我们切换回li颜色。
