1、列表文字不同颜色（刷新不随机） 【纯CSS】

上图所示：每一个链接都有不同的背景颜色，常用语模板中的tag背景颜色、分类列表中的分类名称颜色等，总之很多列表中常用到不同多彩颜色、不同颜色、不同背景颜色。

下面就按照上图所示的效果，分享下这种比较简单的CSS写法：

上图的HTML代码：

<div class="tagcloud">
 <a href="#" class="1">11</a>
 <a href="#" class="a-2">222</a>
 <a href="#" class="a-3">33</a>
 <a href="#" class="a-4">44</a>
 <a href="#" class="a-5">55</a>
 <a href="#" class="a-6">66</a>
 <a href="#" class="a-7">77</a>
 <a href="#" class="a-8">88</a>
 <a href="#" class="a-9">99</a>
 <a href="#" class="a-10">100</a>
 <a href="#" class="a-11">110</a>
 <a href="#" class="a-12">120</a>
 <a href="#" class="a-13">130</a>
 <a href="#" class="145">140</a>
</div>

注意：本文分享的朵彩想法，使用的是获取css名称的最后一个数字，比如最后一个a中，<a href="#" class="145">140</a>，这个css是145，那么最后一个数字就是5！

这个5可以来源于标签id，可以是标签数量，可以是各种ID，只要生成了不同ID数字即可，只获取最后一个数字。

继续CSS：

.tagcloud{padding:2px 0 !important;}
.tagcloud a{color: #fff;padding:6px;font-size: 14px !important; line-height: 38px; margin-right:5px;}
.tagcloud a[class$="0"]{background-color: #4A4A4A;}
.tagcloud a[class$="1"]{background-color: #428BCA;}
.tagcloud a[class$="2"]{background-color: #5CB85C;}
.tagcloud a[class$="3"]{background-color: #D9534F;}
.tagcloud a[class$="4"]{background-color: #567E95;}
.tagcloud a[class$="5"]{background-color: #B433FF;}
.tagcloud a[class$="6"]{background-color: #00ABA9;}
.tagcloud a[class$="7"]{background-color: #B37333;}
.tagcloud a[class$="8"]{background-color: #FF6600;}
.tagcloud a[class$="9"]{background-color: #D8B303;}

来验证下之前说的最后一个a代码：，<a href="#" class="145">140</a>，css中最后一个数字为5，这时候获取的就是上方css中的 .tagcloud a[class$="5"]{background-color: #B433FF;}。

验证就可以看出：背景颜色  = background-color: #B433FF;  

这个方法纯CSS实现，适用于在序列中可以加入css数字的情况下，下面继续介绍一种随机显示，通过JS实现的！

2、显示不同颜色（刷新会随机显示） 方法：jQuery+CSS

HTML：

<div id="divTags">
<ul>
<li><a href="#">图片</a></li>
<li><a href="#">标签</a></li>
<li><a href="#">关键</a></li>
<li><a href="#">关键词</a></li>
<li><a href="#">哈哈</a></li>
</ul>
</div>

jQuery：

jQuery(function($) {
 
 var sc=$(document);
 var tags_a = $("#divTags li"); 
 tags_a.each(function(){ 
  var x = 5; 
  var y = 0; 
 var rand = parseInt(Math.random() * (x - y + 1) + y); 
  $(this).addClass("divTags"+rand); 
 });
});

CSS：

#divTags ul li{white-space: nowrap;padding: 0;margin-right: 5px;display:inline-block;*display:inline; *zoom:1;}
#divTags ul li.divTags0 a {color:#003366;opacity:.9;}
#divTags ul li.divTags1 a {color:#993300;opacity:.9;}
#divTags ul li.divTags2 a {color:#05792D;opacity:.9;}
#divTags ul li.divTags3 a {color:#16929D;opacity:.9;}
#divTags ul li.divTags4 a {color:#CC0000;opacity:.9;}
#divTags ul li.divTags5 a {color:#0B0B0B;opacity:.9;}
#divTags ul li.divTags0 a:hover{background-color: #003366;text-decoration: none;color:#fff;text-decoration: none;}
#divTags ul li.divTags1 a:hover{background-color: #993300;text-decoration: none;color:#fff;text-decoration: none;}
#divTags ul li.divTags2 a:hover{background-color: #05792D;text-decoration: none;color:#fff;text-decoration: none;}
#divTags ul li.divTags3 a:hover{background-color: #16929D;text-decoration: none;color:#fff;text-decoration: none;}
#divTags ul li.divTags4 a:hover{background-color: #CC0000;text-decoration: none;color:#fff;text-decoration: none;}
#divTags ul li.divTags5 a:hover{background-color: #0B0B0B;text-decoration: none;color:#fff;text-decoration: none;}