如何更改<li>项目的每个项目符号点的颜色？

Question

Say, for example purposes I wanted a list of items that each had a different colour bullet point for each item.

The kicker is I need to do this relatively semantically & automatically, avoiding a user having to add a class or a piece of HTML whilst keeping the colour of the text black.

An example:

• List item with a red bullet
• List item with a blue bullet
• List item with a green bullet
• etc.

It poses an interesting problem - How would one go about do this so that a user can simply add a list of items and my code updates them accordingly.

Answer 1

Remove the default bullets, and add bullet characters (U+2022 BULLET or some other) as generated content. You can style the generated content separately. This is flexible and requires no extra markup (beyond some markup that distinguishes between different items, obviously) but has the drawback of failing on old versions of IE (no support to generated content).

Assuming markup

<ul class="mixed">
  <li class="red">One.</li>
  <li class="green">Two.</li>
</ul>

the style sheet could be

ul.mixed {
  list-style-type: none;
}
ul.mixed li:before {
 content: "\2022";
 padding-right: 0.5em;
}
li.red:before {
  color: red;
}
li.green:before {
  color: green;
}

Answer 2

@sapan's solution above covers keeping the text a set colour. For automatically changing the bullet colour you will need nth-child:

ul li:nth-child(3n) { color:green; }
ul li:nth-child(3n+1) { color:red; }
ul li:nth-child(3n+2) { color:blue; }

It's supported in ie9 and all good browsers, but for earlier versions of ie you'll need a javascript fallback/manually added classes in the html/ accept it's not going to happen . Also, the above assumes you have a finite number of colours you want to cycle through in a fixed order. If you want something more flexible then javascript is probably your best bet overall.

Answer 3

Wheresrhys solution (below) is for me the best, I've just been using it to create a menu for wordpress/joomla where the css can automatically change the colour when a new li is added. I would upvote but dont have the reputation points yet.

ul li:nth-child(3n) { color:green; }
ul li:nth-child(3n+1) { color:red; }
ul li:nth-child(3n+2) { color:blue; }

It's supported in ie9 and all good browsers, but for earlier versions of ie you'll need a javascript fallback/manually added classes in the html/accept it's not going to happen. Also, the above assumes you have a finite number of colours you want to cycle through in a fixed order. If you want something more flexible then javascript is probably your best bet overall."

One insight for those who are not that experienced in css is that this works by making the nth child's css style a child of the main class in the same way you would if you wrote ul li:hover. So your code must reference the object in the same way thus ul li:nth-child. This means that if you wanted to apply this to an element when it is hovering your code will look like this ul li:hover:nth-child (odd/even or a number or equation.) I found this tutorial quite useful as it has a link to a demo at the bottom. One thing to note is that this isnt compatible with IE 8 and below.

http://css-tricks.com/how-nth-child-works/

Answer 4

Biggest problem here will be cross-browser compatibility. Oddly, I think your best bet would be to use css sprites as the LI's background image.

Answer 5

You can wrap the text in the li with <span> or <p> and then use the following css:

ul li.green { color:green; }
ul li.red { color:red; }
ul li span { color:navy; }

Example html:

<ul>
    <li class="red"><span>One.</span></li>
    <li class="green"><span>Two.</span></li>
</ul>

Answer 6

Using the :before pseudo-class, you can customize your lists quite easily:

li:before {
    content: "\00BB \0020";
    color: Red;
}

DEMO

This article from A-List-Apart pretty well covers the subject ​

Answer 7

use separate classes for each effect and apply them to the li's

li{padding-left:10px;}
li.red{background-image: url(images/red.gif) no-repeat left 50%;}
li.blue{background-image: url(images/blue.gif) no-repeat left 50%;}
li.green{background-image: url(images/green.gif) no-repeat left 50%;}