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