我想知道是否有办法更改列表中项目符号的颜色。
我有一个这样的清单：
<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>对我来说，不可能在li中插入任何内容，例如“ span”或“ p”。那么，我可以以某种巧妙的方式更改项目符号的颜色，而不更改文本的颜色吗？
我想知道是否有办法更改列表中项目符号的颜色。
我有一个这样的清单：
<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>对我来说，不可能在li中插入任何内容，例如“ span”或“ p”。那么，我可以以某种巧妙的方式更改项目符号的颜色，而不更改文本的颜色吗？
Answers:
如果可以使用图像，则可以执行此操作。如果没有图像，您将只能更改项目符号的颜色，而不能更改文本的颜色。
使用图像
li { list-style-image: url(images/yourimage.jpg); }看到
不使用图像
然后，您必须编辑HTML标记，并在列表中包括一个跨度，并为li和跨度涂上不同的颜色。
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
我在不添加标记的情况下进行了管理，而是使用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>font-size:1em会得到比例更高的子弹！）
我们可以list-style-image与svgs 结合，我们可以在内联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可以贴在里面！查看下面的靶心示例：
某些浏览器要求width和height属性，要对设置<svg>，或者什么都不显示。在撰写本文时，最新版本的Firefox出现了此问题。我已经在示例中设置了这两个属性。
最近的评论使我想起了data-uri的编码。最近这对我来说是一个痛点，我可以分享一些我研究过的信息。
引用URI规范的data-uri规范表示svg应该根据URI规范进行编码。这意味着应该对各种字符进行编码，例如变为。<%3C
一些消息来源建议使用base64编码，该编码应该可以解决编码问题，但是不必要地会增加SVG的大小，而URI编码则不会。我建议使用URI编码。
<svg>代码，请先尝试通过uri编码器运行它。
建立在@Marc的解决方案基础上-由于项目符号字符使用不同的字体和浏览器进行了不同的渲染，因此我将以下css3技术与border-radius结合使用，制成了我可以更好地控制的项目符号：
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;
}我知道这是一个非常非常老的问题，但我一直在处理这个问题，并提出了一种我从未看到过的方法。给列表指定颜色，然后使用::first-line选择器覆盖文本颜色。我不是专家，所以也许我缺少这种方法的问题，但似乎可行。
li {
color: blue;
}
li::first-line {
color: black;
}<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>同时构建@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
我也真的很喜欢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;
}另外，我发现我用于“ content：”的十六进制代码与Marc的十六进制代码不同（十六进制的圆圈看起来有点过高）。我用过的那个似乎正好位于中间。我还发现了其他几个形状（正方形，三角形，圆形等）就在这里
对我来说，最好的选择是使用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/（选择不需要伪元素即可工作的形状，例如三角形）
您可以使用::markerCSS伪元素来选择列表项的标记框（即项目符号或数字）。
ul li::marker {
color: red;
}注意：在发布此答案时，这被认为是实验技术，仅在Firefox和Safari中实现（到目前为止）。
建立在@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 */
}我今天尝试了此操作并输入了以下内容：
我需要在列表中显示颜色标记（项目符号和数字）。我碰到了这个技巧，并在样式表中编写了属性相互化的信息：
ul,
ol {
list-style: none;
padding: 0;
margin: 0 0 0 15px;
}
ul {}
ol {
counter-reset: li;
}
li {
padding-left: 1em;
}
ul li {}
ul li::before,
ol li::before {
color: #91be3c;
display: inline-block;
width: 1em;
}
ul li::before {
content: "\25CF";
margin: 0 0.1em 0 -1.1em;
}
ol li {
counter-increment: li;
}
ol li::before {
content: counter(li);
margin: 0 0 0 -1em;
}我选择了另一个角色来显示子弹，在这里观看它。我需要相应地调整边距，也许这些值不适用于您选择的字体（数字使用您的网络字体）。