如何在不使用任何图像或跨度标签的情况下通过 CSS 在 UL/LI html 列表中设置项目符号颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5306640/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags
提问by Sam
Imagine a simple unsorted list with some <li>items. Now, I have defined the bullets to be square shaped via list-style:square;However, if I set the color of the <li>items with color: #F00;then everythingbecomes red!
想象一个包含一些<li>项目的简单未排序列表。现在，我已经将子弹定义为方形，list-style:square;但是，如果我设置<li>项目的颜色，color: #F00;那么一切都会变成红色！
While I only want to set the color of the square bullets. Is there an elegant wayto define the color of the bullets in CSS...
虽然我只想设置方形项目符号的颜色。有没有一种优雅的方法来定义 CSS 中项目符号的颜色...
...without using any sprite images nor span tags!
...不使用任何精灵图像或跨度标签！
HTML
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>
CSS
CSS
li{
list-style:square;
}
回答by Lea Verou
The most common way to do this is something along these lines:
最常见的方法是：
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/
JSFiddle：http: //jsfiddle.net/leaverou/ytH5P/
Will work in all browsers, including IE from version 8 and up.
适用于所有浏览器，包括版本 8 及更高版本的 IE。
回答by Facundo Colombier
browsing sometime ago, found this site, have you tried this alternative?
前段时间浏览，发现这个网站，你试过这个替代品吗？
li{
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
}
sounds hard, but you can make your own png image/pattern here, then copy/paste your code and customize your bullets =) stills elegant?
听起来很难，但您可以在这里制作自己的 png 图像/图案，然后复制/粘贴您的代码并自定义您的项目符号 =) 仍然优雅？
EDIT:
编辑：
following the idea of @lea-verou on the other answer and applying this philosophy of outside sources enhancement I've come to this other solution:
遵循@lea-verou 在另一个答案中的想法并应用这种外部来源增强的理念，我得出了另一个解决方案：
- embed in your head the stylesheet of the Webfont icons Library, in this case Font Awesome:
- 将 Webfont 图标库的样式表嵌入您的脑海中，在本例中为 Font Awesome：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
- take a code from FontAwesome cheatsheet(or any other webfont icons).
- 采取从FontAwesome一个代码的cheatsheet（或任何其它web字体图标）。
i.e.: fa-angle-right []
i.e.: fa-angle-right []
and use the last part of f... followed by a number like this, with the font-familytoo:
并使用 f... 的最后一部分，后跟这样的数字，还有font-family：
li:before {
content: "\f105";
font-family: FontAwesome;
color: red; /* or whatever color you prefer */
margin-right: 4px;
}
and that's it! now you have custom bullet tips too =)
就是这样！现在你也有自定义项目符号提示 =)
回答by mdthh
I simply solve this problem like this, which should work in all browsers:
我只是像这样解决这个问题，它应该适用于所有浏览器：
HTML:
HTML：
<ul>
<li><span>Foo</span></li>
<li><span>Bar</span></li>
<li><span>Bat</span></li>
</ul>
CSS:
CSS：
ul li{
color: red
}
ul li span{
color: blue;
}
回答by Alex
The current spec of the CSS 3 Listsmodule does specify the ::markerpseudo-elementwhich would do exactly what you want; FF has been tested
to not support ::markerand I doubt that either Safari or Opera has it.
IE, of course, does not support it.
CSS 3 Lists模块的当前规范确实指定了可以完全满足您要求的::marker伪元素；FF 经测试不支持::marker，我怀疑 Safari 或 Opera 是否支持。IE当然不支持。
So right now, the only way to do this is to use an image with list-style-image.
所以现在，唯一的方法是使用带有list-style-image.
I guess you could wrap the contents of an liwith a spanand then you could set the color of each, but that seems a little hackish to me.
我想你可以li用 a包裹 an 的内容，span然后你可以设置每个的颜色，但这对我来说似乎有点hackish。
回答by Rahul Desai
One way to do it is using li:beforewith content: ""and styling it as inline-blockelement.
一种方法是使用li:beforewithcontent: ""并将其样式化为inline-block元素。
Here is a working code snippet:
这是一个工作代码片段：
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>回答by Jose Rui Santos
Yet, another solution is to use a :beforepseudo element with a border-radius: 50%. This will work in all browsers, including IE 8 and up.
然而，另一种解决方案是使用:before带有border-radius: 50%. 这将适用于所有浏览器，包括 IE 8 及更高版本。
Using the emunit allows responsiveness to font size changes. You can test this, by resizing your jsFiddle window.
使用该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%;
}
You can even play with the box-shadowto create some nice shadows, something that will not look nice with the content: "? "solution.
您甚至可以使用box-shadow来创建一些漂亮的阴影，这些阴影在content: "? "解决方案中看起来不太好。
回答by Benito
I tried this and things got weird for me. (css stopped working after the :after {content: "";}part of this tutorial. I found you can color the bullets by just using color:#ddd;on the liitem itself.
我试过这个，事情对我来说很奇怪。（在:after {content: "";}本教程的部分之后，css 停止工作。我发现您可以通过color:#ddd;在li项目本身上使用来为项目符号着色。
Here's an example.
这是一个例子。
li{
color:#ff0000;
list-style:square;
}
a {
text-decoration: none;
color:#00ff00;
}
a:hover {
background-color: #ddd;
}
回答by Veerle Verbert
I use jQuery for this:
我为此使用jQuery：
jQuery('li').wrapInner('<span class="li_content" />');
& with some CSS:
和一些 CSS：
li { color: red; }
li span.li_content { color: black; }
maybe overkill, but handy if you're coding for a CMS and you don't want to ask your editors to put an extra span in every list-items.
可能有点矫枉过正，但如果您正在为 CMS 编码并且不想要求编辑器在每个列表项中添加额外的跨度，则很方便。
回答by Philip Schweiger
I would recommend giving the LIa background-imageand padding-left. The list-style-imageattribute is flakey in cross-browser environments, and adding an extra element, such as a span, is unneccessary. So your code would end up looking something like this:
我建议给LIabackground-image和padding-left。该list-style-image属性在跨浏览器环境中是 flakey，并且不需要添加额外的元素，例如 span。所以你的代码最终会看起来像这样：
li {
background:url(../images/bullet.png) 0 0 no-repeat;
list-style:none;
padding-left:10px;
}
回答by Adam Bryzak
The easiest thing you can do is wrap the contents of the <li>in a <span>or equivalent then you can set the color independently.
您可以做的最简单的事情是将<li>a<span>或等效项中的内容包装起来，然后您可以独立设置颜色。
Alternatively, you could make an image with the bullet color you want and set it with the list-style-imageproperty.
或者，您可以使用所需的项目符号颜色制作图像并使用list-style-image属性进行设置。
