想象一个简单的无序列表，其中包含一些<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在本教程的: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，这很方便。
然而，另一个解决方案是使用a:before伪元素，边界半径:50%。这将适用于所有浏览器，包括ie8及以上。
使用em单元允许响应字体大小的变化。您可以通过调整jsFiddle窗口的大小来测试这一点。
ul {
list-style: none;
line-height: 1em;
font-size: 3vw;
}
ul li:before {
content: "";
line-height: 1em;
width: .5em;
height: .5em;
background-color: red;
float: left;
margin: .25em .25em 0;
border-radius: 50%;
}
js小提琴
你甚至可以使用盒子阴影来创建一些漂亮的阴影，这些阴影在内容中看起来并不好看:“•”解决方案。
我试过了，结果感觉怪怪的。css在本教程的:after {content: "";}部分后停止工作。我发现你可以通过使用color:#ddd;在li项本身上。
举个例子。
li{
color:#ff0000;
list-style:square;
}
a {
text-decoration: none;
color:#00ff00;
}
a:hover {
background-color: #ddd;
}
我知道这篇文章的回答有点晚了，但作为参考……
CSS
ul {
color: red;
}
li {
color: black;
}
子弹的颜色是在ul标签上定义的，然后我们切换回li颜色。
你能做的最简单的事情是将<li>的内容包装在<span>或等效的内容中，然后你可以独立地设置颜色。
或者，你也可以用你想要的项目符号颜色制作一张图片，并用list-style-image属性设置它。
