想象一个简单的无序列表，其中包含一些<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 > <跨越> Foo -跨越> < < li > < li > <跨越> < /跨越> < li >酒吧 < li > <跨越蝙蝠> < /跨越> < li > < /德>
其他回答
Lea Verou解决方案在多行条目中的完美缩进可能是这样的:
ul{
list-style: none;
position: relative;
padding: 0;
margin: 0;
}
li{
padding-left: 1.5em;
}
li:before {
position: absolute;
content: "•";
color: red;
left: 0;
}
css3lists模块的当前规范确实指定了::标记 伪元素，它会做你想做的事情;FF已测试 不支持::marker，我怀疑Safari或Opera都有它。 当然，IE并不支持它。
现在，做这个的唯一方法是使用带有list-style-image的图像。
我猜你可以用span来包装一个li的内容，然后你可以设置每个的颜色，但这对我来说似乎有点笨拙。
一种方法是使用li:before和content: ""并将其样式化为内联块元素。
下面是一个工作代码片段:
ul { list-style-type: none; /* no default bullets */ } ul li { font-family: Arial; font-size: 18px; } ul li:before { /* the custom styled bullets */ background-color: #14CCBB; border-radius: 50%; content: ""; display: inline-block; margin-right: 10px; margin-bottom: 2px; height: 10px; width: 10px; } <ul> <li>Swollen joints</li> <li>Pain in hands and knees</li> <li>Redness around joints</li> <li>Constant fatigue</li> <li>Morning stiffness in joints</li> <li>High fevers</li> <li>Rheumatoid nodules, which develop around joints</li> </ul>
你能做的最简单的事情是将<li>的内容包装在<span>或等效的内容中，然后你可以独立地设置颜色。
或者，你也可以用你想要的项目符号颜色制作一张图片，并用list-style-image属性设置它。
我正在为这个问题添加我的解决方案。
我不想使用image，验证器会惩罚你在CSS中使用负值，所以我这样做:
ul { list-style:none; padding:0; margin:0; }
li { padding-left:0.75em; position:relative; }
li:before { content:"•"; color:#e60000; position:absolute; left:0em; }
