li:nth-child(2n+1) (3n+1)1开始隔N个再开始
li:nth-child(2n) (n+5) 5之后
li:nth-child(2n) (even) 偶数
li:nth-child(odd) 奇数
li:nth-child(3n+4) 第4个开始 隔3个再来
nth-of-type同上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ padding: 0px; margin: 0px; } .container{ border: 1px solid palegreen; margin: 50px auto; width: 300px; padding: 10px; } .clearfix{ overflow: hidden; clear: both; } .container li{ float: left; list-style: none; width: 20px; margin-right: 5px; border: 1px solid tomato; text-align: center; } .container a{ display: block; width: 20px; height: 20px; text-align: center; border-radius: 10px; background-color: thistle; text-decoration: none; } /* li:nth-child(2n+1) (3n+1)1开始隔N个再开始 li:nth-child(2n) (n+5) 5之后 li:nth-child(2n) (even) 偶数 li:nth-child(odd) 奇数 li:nth-child(3n+4) 第4个开始 隔3个再来 */ .container li:nth-child(3n+4) a{ background-color: slateblue; } </style> </head> <body> <div class="container clearfix"> <ul class="clearfix"> <li><a href="http://">1</a></li> <li><a href="http://">2</a></li> <li><a href="http://">3</a></li> <li><a href="http://">4</a></li> <li><a href="http://">5</a></li> <li><a href="http://">6</a></li> <li><a href="http://">7</a></li> <li><a href="http://">8</a></li> <li><a href="http://">9</a></li> <li><a href="http://">10</a></li> </ul> </div> </body> </html>