想象一个简单的无序列表，其中包含一些<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的内容，然后你可以设置每个的颜色，但这对我来说似乎有点笨拙。
然而，另一个解决方案是使用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小提琴
你甚至可以使用盒子阴影来创建一些漂亮的阴影，这些阴影在内容中看起来并不好看:“•”解决方案。
Lea Verous的解决方案很好，但我想要更多地控制子弹的位置，所以这是我的方法:
.entry ul {
list-style: none;
padding: 0;
margin: 0;
/* hide overflow in the case of floating elements around ... */
overflow: hidden;
}
.entry li {
position: relative;
padding-left: 24px;
}
.entry li:before {
/* with absolute position you can move this around or make it bigger without getting unwanted scrollbars */
position: absolute;
content: "• ";
color: #E94E24;
font-size: 30px;
left: 0;
/* use fonts like "arial" or use "sans-serif" to make the dot perfect round */
font-family: Arial, sans-serif;
}
浏览前一段时间，发现这个网站，你尝试过这个替代方案吗?
li{
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
}
听起来很难，但你可以在这里制作自己的PNG图像/图案，然后复制/粘贴你的代码和自定义你的子弹=)仍然优雅?
编辑:
遵循@lea-verou在另一个答案上的想法，并应用外部资源增强的哲学，我得到了另一个解决方案:
在你的头脑中嵌入Webfont图标库的样式表，在这种情况下字体很棒:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
从fontaweesome cheatsheet(或任何其他webfont图标)中获取代码。
例如: fa-angle-right [& # xf105;]
然后用f的最后一部分。后面跟着一个像这样的数字，还有font-family:
li:before {
content: "\f105";
font-family: FontAwesome;
color: red; /* or whatever color you prefer */
margin-right: 4px;
}
就是这样!现在你也有自定义子弹提示=)
小提琴
我简单地像这样解决了这个问题，它应该在所有浏览器中工作:
申力 颜色:红 的 申里思潘 颜色:蓝色; 的 <德> < li > <跨越> Foo -跨越> < < li > < li > <跨越> < /跨越> < li >酒吧 < li > <跨越蝙蝠> < /跨越> < li > < /德>
