绝大部分网站都会有关键词tags这个标签，在文章的结尾处会提取多个当前文章的关键词，最近朋友问一些Tags关键词是七彩颜色是如何做的呢？下面编程之家跟大家分享：用CSS3选择器nth-child制作七彩关键词。
先看效果图
HTML代码部分如下
<p class="keywords"> 关键词：<a href="">编程之家</a><a href="">网站建设</a><a href="" target="_blank">SEO网站优化</a><a href="" target="_blank">焦点图集合 </a><a href="" target="_blank">JS代码下载</a><a href="" target="_blank">免费下载</a></span> </p>
CSS代码部分如下
.keywords a{padding:0px 4px; text-decoration:none;}
.keywords a:nth-child(9n){color: #4A4A4A;}
.keywords a:nth-child(9n+1){color: #428BCA;}
.keywords a:nth-child(9n+2){color: #5CB85C;}
.keywords a:nth-child(9n+3){color: #D9534F;}
.keywords a:nth-child(9n+4){color: #567E95;}
.keywords a:nth-child(9n+5){color: #B433FF;}
.keywords a:nth-child(9n+6){color: #00ABA9;}
.keywords a:nth-child(9n+7){color: #B37333;}
.keywords a:nth-child(9n+8){color: #FF6600;}
.keywords a:hover{text-decoration:underline;}
主要用到了CSS3里面的nth-child选择器，这是制作了7彩颜色的关键词标签，想要实现七彩关键词底色的修改下CSS里的颜色为背景颜色即可哦。
原文：https://www.cnblogs.com/wenruo/p/9732704.html 先上...