纯css实现统一div下<a>标签不同背景颜色

许多朋友在建站时候都会遇到一种非常漂亮的效果，就是同一个div下例如有5个<a href>链接，而且5个链接没有加任何样式，但是前台显示的背景色却是不同的，这里互补网来为大家上css实现该种效果。

html代码：

<div class="categories">
<a href="">海滩</a> <a href="">游泳</a> <a href="">景点</a> <a href="">美女</a> <a href="">比基尼</a>
</div>

.categories{margin-bottom:20px;}
.categories a{padding:4px 10px;background-color:#19B5FE;color:#fff;font-size:12px;line-height:1.4;font-weight:400;margin:0 5px 5px 0;border-radius:2px;display:inline-block}
.categories a:nth-child(5n){background-color:#4A4A4A}
.categories a:nth-child(5n+1){background-color:#ff5e5c}
.categories a:nth-child(5n+2){background-color:#ffbb50}
.categories a:nth-child(5n+3){background-color:#1ac756}
.categories a:nth-child(5n+4){background-color:#19B5FE}
.categories a:hover{background-color:#1B1B1B;color:#FFF}

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

n 可以是数字、关键词或公式。