绝大部分网站都会有关键词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里的颜色为背景颜色即可哦。
扩展阅读：CSS3选择器nth-child的使用范例 巧用CSS3里的last-child去除最后一个元素属性
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
