想象一个简单的无序列表，其中包含一些<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颜色。
其他回答
我建议给LI一个背景图像和左填充。list-style-image属性在跨浏览器环境中很脆弱，没有必要添加一个额外的元素，比如span。所以你的代码最终看起来是这样的:
li {
background:url(../images/bullet.png) 0 0 no-repeat;
list-style:none;
padding-left:10px;
}
我试过了，结果感觉怪怪的。css在本教程的:after {content: "";}部分后停止工作。我发现你可以通过使用color:#ddd;在li项本身上。
举个例子。
li{
color:#ff0000;
list-style:square;
}
a {
text-decoration: none;
color:#00ff00;
}
a:hover {
background-color: #ddd;
}
我使用jQuery来实现这个:
jQuery('li').wrapInner('<span class="li_content" />');
&与一些CSS:
li { color: red; }
li span.li_content { color: black; }
也许有点过分，但如果你是为CMS编写代码，而你不想让编辑在每个列表项中添加额外的span，这很方便。
以Lea的演示为例，这里有一种不同的制作无序列表的方法，带有边框:http://jsfiddle.net/vX4K8/7/
HTML
<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.</li>
<ul>
<li>Son</li>
<li>Of</li>
<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.</li>
</ul>
</ul>
</ul>
CSS
ul {
list-style: none;
margin: 0;
}
ul:first-child {
padding: 0;
}
li {
line-height: 180%;
border-bottom: 1px dashed #CCC;
margin-left: 14px;
text-indent: -14px;
}
li:last-child {
border: none;
}
li:before {
content: "";
border-left: 4px solid #CCC;
padding-left: 10px;
}
这就行了。
li{
color: #fff;
}
