演示代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<style type="text/css">
ul{
width: 400px;margin: 100px auto;
}
/*
以下nth-child(an+b)中:
a表示变化周期,头尾两个元素序号大减小;
n表示计数器,默认从0开始;
b表示偏移量,从第几号元素开始。
*/
/* li:nth-child(5n+4){
color: red;
} */
li:nth-child(5n+4):nth-child(-n+10){
color: red;
}
</style>
</head>
<body>
<!-- ul>li{我要自学$}*20 -->
<ul>
<li>我要自学1</li>
<li>我要自学2</li>
<li>我要自学3</li>
<li>我要自学4</li>
<li>我要自学5</li>
<li>我要自学6</li>
<li>我要自学7</li>
<li>我要自学8</li>
<li>我要自学9</li>
<li>我要自学10</li>
<li>我要自学11</li>
<li>我要自学12</li>
<li>我要自学13</li>
<li>我要自学14</li>
<li>我要自学15</li>
<li>我要自学16</li>
<li>我要自学17</li>
<li>我要自学18</li>
<li>我要自学19</li>
<li>我要自学20</li>
</ul>
</body>
</html>