如何在不使用任何图像或跨度标签的情况下通过CSS在UL / LI html列表中设置子弹颜色[复制]

本文翻译自：How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [duplicate]

This question already has an answer here: 这个问题在这里已有答案：

• Change bullets color of an HTML list without using span 12 answers 更改HTML列表的项目符号颜色，而不使用跨度 12答案

Imagine a simple unsorted list with some <li> items. 想象一下带有一些<li>项的简单未排序列表。 Now, I have defined the bullets to be square shaped via list-style:square; 现在，我已经通过list-style:square;定义子弹为方形list-style:square; However, if I set the color of the <li> items with color: #F00; 但是，如果我用颜色设置<li>项目的color: #F00; then everything becomes red! 一切都变红了！

While I only want to set the color of the square bullets. 虽然我只想设置方形子弹的颜色。 Is there an elegant way to define the color of the bullets in CSS... 是否有一种优雅的方式来定义CSS中子弹的颜色......

...without using any sprite images nor span tags! ...不使用任何精灵图像也不使用span标签！

HTML HTML

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>

CSS CSS

li{
   list-style:square;
}

---

#1楼

参考：https://stackoom.com/question/MGUy/如何在不使用任何图像或跨度标签的情况下通过CSS在UL-LI-html列表中设置子弹颜色-复制

---

#2楼

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关于另一个答案的想法并应用这种外部源代码增强的理念，我来到另一个解决方案：

1. 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">

2. take a code from FontAwesome cheatsheet (or any other webfont icons). 从FontAwesome cheatsheet （或任何其他webfont图标）获取代码。

 ie: fa-angle-right [] 

and use the last part of f... followed by a number like this, with the font-family too: 并使用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 =) 现在你也有自定义项目符号提示=）

fiddle 小提琴

---

#3楼

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 li item itself. （CSS停止后的工作:after {content: "";} ，部分本教程中，我发现，你可以通过只使用颜色子弹color:#ddd;在li项目本身。

Here's an example . 这是一个例子 。

li{
    color:#ff0000;    
    list-style:square;                
}
a {
    text-decoration: none;
    color:#00ff00;
}

a:hover {
    background-color: #ddd;
}

---

#4楼

I know it's a bit of a late answer for this post, but for reference... 我知道这篇文章有点迟到，但供参考......

CSS CSS

ul {
    color: red;
}

li {
    color: black;
}

The bullet colour is defined on the ul tag and then we switch the li colour back. 子弹颜色在ul标签上定义，然后我们将li颜色切换回来。

---

#5楼

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;
}

---

#6楼

Taking Lea's demo, here's a different way of making unordered lists, with borders: http://jsfiddle.net/vX4K8/7/ 以Lea的演示为例，这是一种制作无序列表的不同方式，带有边框： http ： //jsfiddle.net/vX4K8/7/

HTML 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 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;
}