我想知道是否有办法改变列表中项目符号的颜色。
我有一个这样的清单：
<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>
我不可能在li中插入任何内容，例如'span'og a'p'。那么我可以用聪明的方式改变子弹的颜色而不是文本吗？
答案 0 :(得分：182)
我在没有添加标记的情况下管理了这个，而是使用了li:before。这明显具有:before的所有限制（没有旧的IE支持），但在经过一些非常有限的测试之后，它似乎适用于IE8，Firefox和Chrome。子弹样式也受到unicode内容的限制。
li {
list-style: none;
}
li:before {
/* For a round bullet */
content: '\2022';
/* For a square bullet */
/*content:'\25A0';*/
display: block;
position: relative;
max-width: 0;
max-height: 0;
left: -10px;
top: 0;
color: green;
font-size: 20px;
}<ul>
<li>foo</li>
<li>bar</li>
</ul>
答案 1 :(得分：34)
如果您可以使用图像，那么您可以这样做。如果没有图像，您将无法仅更改项目符号的颜色，也无法更改文本。
使用图片
li { list-style-image: url(images/yourimage.jpg); }
见
不使用图片
然后你必须编辑HTML标记并在列表中包含一个范围，并用不同的颜色为li和span着色。
答案 2 :(得分：19)
我们可以将list-style-image与svg结合使用，我们可以内联css ！这种方法对“子弹”提供了令人难以置信的控制，“子弹”可以成为任何东西。
要获得红色圆圈，只需使用以下css：
ul {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}
但这仅仅是个开始。这允许我们用这些子弹做任何我们想要的疯狂事情。圆形或矩形很容易，但你可以用svg绘制的任何东西都可以粘在那里！看看下面的靶心示例：
ul {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/></svg>');
}
ul ul {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="0" y="0" height="10" width="10"/></svg>');
}
ul ul ul {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="3"/></svg>');
}
ul ul ul ul {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="2" y="2" height="4" width="4"/></svg>');
}
ul.bulls-eye {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/><circle fill="white" cx="5" cy="5" r="4"/><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}
ul.multi-color {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="15" height="15"><circle fill="blue" cx="6" cy="6" r="6"/><circle fill="pink" cx="6" cy="6" r="4"/><circle fill="green" cx="6" cy="6" r="2"/></svg>');
}<ul>
<li>
Big circles!
<ul>
<li>Big rectangles!</li>
<li>b
<ul>
<li>Small circles!</li>
<li>c
<ul>
<li>Small rectangles!</li>
<li>b</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>b</li>
</ul>
<ul class="bulls-eye">
<li>Bulls</li>
<li>eyes.</li>
</ul>
<ul class="multi-color">
<li>Multi</li>
<li>color</li>
</ul>
某些浏览器需要在width上设置height和<svg>属性，否则它们不会显示任何内容。在撰写本文时，最新版本的Firefox出现了这个问题。我在示例中设置了两个属性。
最近的一条评论让我想起了数据编码。这对我来说是一个痛点，我可以分享一些我研究过的信息。
引用data-uri spec的URI spec表示应根据URI spec对svg进行编码。这意味着应对所有类型的字符进行编码，例如<变为%3C。
某些来源建议使用base64编码，这应该可以解决编码问题，但是它会不必要地增加SVG的大小，而URI编码却不会。我建议使用URI编码。
答案 3 :(得分：15)
建立@Marc的解决方案 - 由于子弹角色以不同的字体和浏览器呈现不同，我使用以下带有border-radius的css3技术来制作一个我可以更多控制的子弹：
li:before {
content: '';
background-color: #898989;
display: inline-block;
position: relative;
height: 12px;
width: 12px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
margin-right: 4px;
top: 2px;
}
答案 4 :(得分：8)
我知道这是一个非常非常古老的问题，但是我正在玩这个并提出了一种我没有看过的方式。为列表指定一种颜色，然后使用::first-line选择器覆盖文本颜色。我不是专家，所以也许我错过了这种方法有问题，但似乎有效。
li {
color: blue;
}
li::first-line {
color: black;
}<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>
答案 5 :(得分：6)
建立@Marc和@jessica解决方案 - 这是我使用的解决方案：
li {
position:relative;
}
li:before {
content:'';
display: block;
position: absolute;
width: 6px;
height:6px;
border-radius:6px;
left: -20px;
top: .5em;
background-color: #000;
}
我使用em表示字体大小，因此，如果您将top值设置为.5em，则会始终将其置于第一行文字的中间位置。我使用了left:-20px，因为这是浏览器中项目符号的默认位置：父padding/2
答案 6 :(得分：2)
我真的很喜欢Marc的答案 - 我需要一套不同颜色的UL，显然只是使用一个班级会更容易。这是我用于橙色的内容，例如：
ul.orange {
list-style: none;
padding: 0px;
}
ul.orange > li:before {
content: '\25CF ';
font-size: 15px;
color: #F00;
margin-right: 10px;
padding: 0px;
line-height: 15px;
}
另外，我发现我使用的十六进制代码＆＃34;内容：＆＃34;与Marc的不同（六角圆似乎有点太高）。我用的那个似乎完全坐在中间。我还发现了其他几种形状（正方形，三角形，圆形等）right here
答案 7 :(得分：1)
对我来说，最好的选择是使用CSS伪元素，因此对于disc子弹样式，它看起来像这样：
ul {
list-style-type: none;
}
li {
position: relative;
}
li:before {
content: '';
display: block;
position: absolute;
width: 5px; /* adjust to suit your needs */
height: 5px; /* adjust to suit your needs */
border-radius: 50%;
left: -15px; /* adjust to suit your needs */
top: 0.5em;
background: #f00; /* adjust to suit your needs */
}<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
注意：
width和height应该具有相同的值以保持指针舍入border-radius列表项目符号，可以将square设置为零对于更多项目符号样式，您可以使用其他css形状https://css-tricks.com/examples/ShapesOfCSS/（选择不需要伪元素的项目，例如三角形）
答案 8 :(得分：1)
您可以使用::marker CSS伪元素来选择列表项（即项目符号或数字）的标记框。
ul li::marker {
color: red;
}
注意：：在发布此答案时，这被视为实验性技术，仅在Firefox和Safari中实现（到目前为止）。
答案 9 :(得分：0)
以@ddilsaver的答案为基础。我希望能够使用精灵作为子弹。这似乎有效：
li {
list-style: none;
position: relative;
}
li:before {
content:'';
display: block;
position: absolute;
width: 20px;
height: 20px;
left: -30px;
top: 5px;
background-image: url(i20.png);
background-position: 0px -40px; /* or whatever offset you want */
}
答案 10 :(得分：0)
我今天尝试过并输入以下内容：
我需要在列表中显示颜色标记（项目符号和数字）。我遇到了这个tip，并在样式表中将属性相互化了：
WeakSet我选择了其他字符来显示项目符号，看着它here。我需要相应地调整边距，也许这些值不适用于您选择的字体（数字使用您的网络字体）。
答案 11 :(得分：0)
尝试使用此代替：
ul {
color: red;
}
答案 12 :(得分：0)
内联版本，适用于Outlook Desktop：
<ul style="list-style:square;">
<li style="color:red;"><span style="color:black;">Lorem.</span></li>
<li style="color:red;"><span style="color:black;">Lorem.</span></li>
</ul>