如何通过CSS在UL / LI html列表中设置Bullet颜色，而不使用任何图像或span标签
想象一下包含一些<li>项目的简单未sorting列表。 现在，我已经通过list-style:square;定义了子弹正方形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; }
最常见的做法是这样的：
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>
前段时间浏览，发现这个网站，你有没有尝试过这个select？
li{ list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg=="); }
听起来很难，但你可以在这里做你自己的PNG图像/模式，然后复制/粘贴你的代码和自定义你的子弹=）仍然优雅？
编辑：
在@ lea-verou的另一个答案，并应用这种外部来源增强的哲学思想后，我来到这个其他的解决scheme：
- 在您的脑海中embeddedWebfont图标库的样式表，在这种情况下Font Awesome：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
- 从FontAwesome cheatsheet （或任何其他webfont图标）获取代码。
ie: fa-angle-right []
并使用f的最后部分…后跟一个像这样的数字， font-family ：
li:before { content: "\f105"; font-family: FontAwesome; color: red; /* or whatever color you prefer */ margin-right: 4px; }
就是这样！ 现在你也有自定义的子弹提示=）
小提琴
我简单地解决这个问题，这应该在所有浏览器中工作：
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; }
CSS 3 Lists模块的当前规范确实指定了::marker伪元素 ，它可以完成你想要的function; FF已经testing不支持::marker ，我怀疑Safari或Opera有它。 IE当然不支持它。
所以现在，唯一的方法就是使用list-style-image 。
我想你可以用一个span来包装一个li的内容，然后你可以设置每个的颜色，但是这对我来说似乎有些ha </s>。
然而，另一个解决scheme是使用一个border-radius: 50%伪元素:before 。 这将适用于所有浏览器，包括IE 8及以上。
使用em单位可以响应字体大小的变化。 你可以testing这个，通过调整你的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%; }
的jsfiddle
你甚至可以玩box-shadow来创build一些漂亮的阴影，这些content: "• "不会看起来不错content: "• "解决scheme”。
一种方法是使用li:before with content: ""并将其设置为inline-block元素。
这是一个工作代码片段：
ul { list-style-type: none; /* no default bullets */ } li { font-family: Arial; font-size: 18px; } li:before { /* the custom styled bullets */ content: ""; margin-right: 10px; display: inline-block; width: 10px; height: 10px; background-color: #14CCBB; border-radius: 50%; margin-bottom: 2px; }
<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>
我用这个jQuery：
jQuery('li').wrapInner('<span class="li_content" />');
＆与一些CSS：
li { color: red; } li span.li_content { color: black; }
也许矫枉过正，但如果你正在编写一个CMS，并且你不想让你的编辑在每个列表项目中增加一个额外的跨度，
我试过这个，对我来说事情变得很奇怪。 （在本教程的:after {content: "";}部分之后，css停止工作，我发现只需在li项目本身使用color:#ddd;项目符号color:#ddd; 。
这是一个例子 。
li{ color:#ff0000; list-style:square; } a { text-decoration: none; color:#00ff00; } a:hover { background-color: #ddd; }
我会build议给LI一个background-image和padding-left 。 list-style-image属性在跨浏览器的环境中是flaky的，添加一个额外的元素（如span）是不必要的。 所以你的代码最终会看起来像这样：
li { background:url(..http://img.dovov.combullet.png) 0 0 no-repeat; list-style:none; padding-left:10px; }
你可以做的最简单的事情是将<li>的内容包装在一个<span>或等价物中，然后你可以独立地设置颜色。
或者，您可以使用所需的子弹颜色制作图像，并使用list-style-image属性进行设置。
Lea Verou解决scheme在多行条目中具有完美缩进的变体可能是这样的：
ul{ list-style: none; position: relative; padding: 0; margin: 0; } li{ padding-left: 1.5em; } li:before { position: absolute; content: "•"; color: red; left: 0; }
我正在为这个问题添加我的解决scheme。
我不想使用图像和validation器将惩罚你在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; }
我知道这是一个迟到的答复这个职位，但供参考…
CSS
ul { color: red; } li { color: black; }
项目符号颜色在ul标签上定义，然后我们切换回li颜色。
以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; }
Lea Verous的解决scheme是好的，但我想要更多的控制子弹的位置，所以这是我的方法：
.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{ color: #fff; }
