想象一个简单的无序列表,其中包含一些<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;
}

当前回答

css3lists模块的当前规范确实指定了::标记 伪元素,它会做你想做的事情;FF已测试 不支持::marker,我怀疑Safari或Opera都有它。 当然,IE并不支持它。

现在,做这个的唯一方法是使用带有list-style-image的图像。

我猜你可以用span来包装一个li的内容,然后你可以设置每个的颜色,但这对我来说似乎有点笨拙。

其他回答

css3lists模块的当前规范确实指定了::标记 伪元素,它会做你想做的事情;FF已测试 不支持::marker,我怀疑Safari或Opera都有它。 当然,IE并不支持它。

现在,做这个的唯一方法是使用带有list-style-image的图像。

我猜你可以用span来包装一个li的内容,然后你可以设置每个的颜色,但这对我来说似乎有点笨拙。

我试过了,结果感觉怪怪的。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{
  color: #fff;
}

然而,另一个解决方案是使用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小提琴

你甚至可以使用盒子阴影来创建一些漂亮的阴影,这些阴影在内容中看起来并不好看:“•”解决方案。