如何在不使用任何圖像或跨度标簽的情況下通過CSS在UL / LI html清單中設定子彈顔色[複制] ...without using any sprite images nor span tags! ...不使用任何精靈圖像也不使用span标簽！

本文翻譯自：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" target="_blank" rel="external nofollow" >

1. take a code from FontAwesome cheatsheet (or any other webfont icons). 從FontAwesome cheatsheet （或任何其他webfont圖示）擷取代碼。

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