更改HTML列表的项目符号颜色，而不使用跨度
我想知道是否有方法来改变列表中的项目符号的颜色。
我有这样一个列表：
<ul> <li>House</li> <li>Car</li> <li>Garden</li> </ul> 我不可能在里面插入任何东西，比如“span”和“p”。 所以我可以用一些聪明的方式改变子弹的颜色而不是文字？
如果你可以使用图像，那么你可以做到这一点。 而没有图像，你将无法只改变子弹的颜色，而不是文字。
使用图像
li { list-style-image: url(images/yourimage.jpg); }
看到
列表样式图像
不使用图像
然后，您必须编辑HTML标记，并在列表中添加一个跨度，并以不同的颜色对li和span进行着色。
我pipe理这个没有添加标记，而是使用li:before 。 这显然有所有的限制:before （没有旧的IE支持），但它似乎与一些非常有限的testingIE8，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>
我们可以将list-style-image与svg s结合起来，我们可以在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绘制，你可以坚持在那里！ 看看下面的bullseye示例：
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>
构build@ Marc的解决scheme – 由于使用不同的字体和浏览器呈现不同的子弹字符，因此我使用以下带有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; }
build立@Marc和@jessica解决scheme – 这是我使用的解决scheme：
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来表示字体大小，所以如果你将你的最大值设置为.5em它总是会被放置在你的第一行文本的中点。 我用left:-20px因为这是浏览器中子弹的默认位置：parent padding/2
我知道这是一个真正的，真正的老问题，但我正在玩这个，并想出了一个我没有看到张贴的方式。 给列表一个颜色，然后用::first-lineselect器覆盖文本颜色。 我不是专家，所以也许这种方法有什么问题，我错过了，但似乎工作。
li { color: blue; } li::first-line { color: black; }
<ul> <li>House</li> <li>Car</li> <li>Garden</li> </ul>
我真的很喜欢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：”的hex代码与Marc的不同（这个hex的圆圈看起来有点太高了）。 我使用的一个似乎坐在中间完美。 我还在这里发现了其他几个形状（正方形，三angular形，圆形等）
对我来说，最好的select是使用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>
build立在@ 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 */ }
