绝大部分网站都会有关键词tags这个标签,在文章的结尾处会提取多个当前文章的关键词,最近朋友问一些Tags关键词是七彩颜色是如何做的呢?下面青岛星网跟大家分享:用CSS3选择器nth-child制作七彩关键词。
先看效果图
<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>
.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里的颜色为背景颜色即可哦。