Css3实现网站多彩tags标签云模块

很多网站在建站时，都会制作一个Tags标签云模块，之所以在网站中布局这样的一个模块，多数是出于SEO和用户体验的考虑。Tags标签模块是一个一个Tag的a链接，Tags的内容页基本类似于网站的列表页，调用的数据基本上包含有共同关键词或者是共同特性的文章，这一模块如果设计成多彩样式，将更加吸引用户的眼球，那么如何只用Css3制作出多彩Tags标签云模块？

只用Css实现网站多彩Tags标签云模块，主要是利用了Css3中的nth-child()选择器来匹配不同的Tag的链接不同的色彩，来实现多彩样式，同时再用nth-child()匹配出Tag的a标签hover时的样式，这样就简单实现了网站的多彩Tags标签云模块。

.tags-list ul li:nth-child(9n) a:hover{
    background-color: #005cbf;
}
.tags-list ul li:nth-child(9n+1) a:hover{
    background-color: #99CCCC;
}
.tags-list ul li:nth-child(9n+2) a:hover{
    background-color:#FF6666;
}
.tags-list ul li:nth-child(9n+3) a:hover{
    background-color:#99CC66;
}
.tags-list ul li:nth-child(9n+4) a:hover{
    background-color:#FF9966;
}
.tags-list ul li:nth-child(9n+5) a:hover{
    background-color:#CC3399;
}
.tags-list ul li:nth-child(9n+6) a:hover{
    background-color:#666633;
}
.tags-list ul li:nth-child(9n+7) a:hover{
    background-color:#009933;
}
.tags-list ul li:nth-child(9n+8) a:hover{
    background-color:#003366;
}

以上为Css实现代码，我的实例中只匹配出了a链接hover时的样式，a链接显示的是默认a样式，如果a标签也希望呈现出多彩效果，可根据nth-child()在hover前匹配出a链接的样式。