网站中我们经常看到各种各样的小标签，我们可以通过nth-child选择器来过设置样式来实现多彩小标签，nth-child(9n)代表9的倍数项，代码如下：
<body>
<style type="text/css" rel="stylesheet">
.tags a:nth-child(9n) {
color:#4A4A4A;
background-color:#4A4A4A66;
}
.tags a:nth-child(9n+1) {
color:#428BCA;
background-color:#428BCA66;
}
.tags a:nth-child(9n+2) {
color:#5CB85C;
background-color:#5CB85C66;
}
.tags a:nth-child(9n+3) {
color:#D9534F;
background-color:#D9534F66;
}
.tags a:nth-child(9n+4) {
color:#567E95;
background-color:#567E9566;
}
.tags a:nth-child(9n+5) {
color:#B433FF;
background-color:#B433FF66;
}
.tags a:nth-child(9n+6) {
color:#00ABA9;
background-color:#00ABA966;
}
.tags a:nth-child(9n+7) {
color:#B37333;
background-color:#B3733366;
}
.tags a:nth-child(9n+8) {
color:#FF6600;
background-color:#FF660066;
}
.tags a {
opacity:0.9;
color:#428BCA;
background-color:#428BCA66;
display:inline-block;
margin:0 5px 5px 0;
padding:0 6px;
line-height:30px;
border-radius:4px;
}
</style>
<p class="tags">
<a>java</a>
<a>oracle</a>
<a>mysql</a>
<a>redis</a>
<a>nginx</a>
<a>spring</a>
<a>mybatis</a>
</p>
</body>
预览效果
评论区