English 想象一个简单的未排序列表，其中包含一些<li>项目。现在，我将子弹定义为通过。list-style:square;但是，如果我将<li>项目的颜色设置为，color: #F00;则所有项目都将变为红色！
虽然我只想设置方形项目符号的颜色。是否有一种优雅的方式来定义CSS中项目符号的颜色...
的HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>
的CSS
li{
list-style:square;
}
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;
}
以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;
}
我知道这篇文章的答案有点晚了，仅供参考...
的CSS
ul {
color: red;
}
li {
color: black;
}
项目符号的颜色在ul标签上定义，然后我们将li颜色切换回去。
我正在为这个问题添加解决方案。
我不想使用图像，而验证器会因为在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; }
在多行条目中具有完美缩进的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;
}
您最容易做的就是将中的内容包装<li>为<span>或等效形式，然后可以独立设置颜色。
或者，您可以使用所需的项目符号颜色制作图像，然后使用list-style-image属性进行设置。
我建议给LIa background-image和padding-left。list-style-image在跨浏览器的环境中，该属性为flakey，不需要添加额外的元素（例如span）。因此，您的代码最终看起来像这样：
li {
background:url(../images/bullet.png) 0 0 no-repeat;
list-style:none;
padding-left:10px;
}
我尝试了这个，事情对我来说很奇怪。（在完成:after {content: "";}本教程的部分之后，css停止了工作。我发现您可以仅通过使用项目本身来color:#ddd;为li项目符号着色。
这是一个例子。
li{
color:#ff0000;
list-style:square;
}
a {
text-decoration: none;
color:#00ff00;
}
a:hover {
background-color: #ddd;
}
但是，另一种解决方案是将:before伪元素与一起使用border-radius: 50%。这将适用于所有浏览器，包括IE 8及更高版本。
使用本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%;
}
您甚至可以使用box-shadow来创建一些漂亮的阴影，而该阴影在content: "• "解决方案中看起来并不好。
CSS 3 Lists模块的当前规范确实指定了::marker
伪元素，它将完全满足您的要求。FF已被测试为不支持::marker，我怀疑Safari或Opera是否具有它。IE当然不支持它。
因此，目前，唯一的方法是使用带有的图片list-style-image。
我猜您可以li用来包装a的内容，span然后可以设置每个的颜色，但这对我来说似乎有点不足。
我只是解决了这样的问题，它应该在所有浏览器中都可以使用：
HTML：
<ul>
<li><span>Foo</span></li>
<li><span>Bar</span></li>
<li><span>Bat</span></li>
</ul>
CSS：
ul li{
color: red
}
ul li span{
color: blue;
}
一种实现方法是使用li:beforewith content: ""并将其样式化为inline-block元素。
这是一个工作代码段：
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{
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
}
听起来很难，但是您可以在此处制作自己的png图像/图案，然后复制/粘贴代码并自定义项目符号=）仍然优雅吗？
编辑：
遵循@ lea-verou在另一个答案上的想法，并应用外部资源增强的这种哲学，我来到了另一个解决方案：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
i.e.: fa-angle-right []
并使用f ...的最后一部分，后跟这样的数字，font-family也可以使用：
li:before {
content: "\f105";
font-family: FontAwesome;
color: red; /* or whatever color you prefer */
margin-right: 4px;
}
就是这样！现在您也有自定义的项目符号提示=）
最常见的方法是按照以下方式进行操作：
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 1em;
text-indent: -.7em;
}
li::before {
content: "• ";
color: red; /* or whatever color you prefer */
}<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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>JSFiddle：http : //jsfiddle.net/leaverou/ytH5P/
适用于所有浏览器，包括版本8及更高版本的IE。
这样就可以了。