精美而实用的网站,关注web编程技术、网站运营、SEO推广,让您轻松愉快的学习

绝大部分网站都会有关键词tags这个标签,在文章的结尾处会提取多个当前文章的关键词,最近朋友问一些Tags关键词是七彩颜色是如何做的呢?下面青岛星网跟大家分享:用CSS3选择器nth-child制作七彩关键词。

先看效果图

用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去除最后一个元素属性

Tags:CSS3 nth-child 关键词