CSS中nth-child和nth-of-type的简单使用
ele:nth-child是查找父元素下的子元素，包括子元素类型非ele的，当子元素类型不是ele时，则不会进行任何操作；
ele:nth-of-type是查找父元素下的子元素类型为ele的元素，其是按类型进行选择，只有元素类型是ele才能进行匹配。
同样的还有first-child与first-of-type、last-child与last-of-type。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>JS学习范例</title>
<style>
/*取出ul中每一个li前的空格，需要在ul中设置字体大小为0，再到具体的li中设置字体的大小*/
ul{
font-size: 0;
}
.item{
border: 1px solid #ccc;
padding: 15px;
display: inline-block;
}
.item li{
display: inline-block;
border: 1px solid #ccc;
padding: 2px;
}
.item li span{
display: inline-block;
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 15px;
color: #0722AD;
background-color: #D6B514;
font-size: 15px;
}
/*nth-child只是在父节点的子节点标签，当子节点中有非指定的节点时，则跳过*/
.item1 li:nth-child(3){
background-color: lime;
}
.item2 li:nth-child(n + 6){
background-color: lime;
}
.item3 li:nth-child(-n + 4){
background-color: lime;
}
.item4 li:nth-child(4n + 1){
background-color: lime;
}
.margin-item{
display: inline-block;
border: 2px solid #F18806;
padding: 0;
margin: 0;
}
.margin-item li{
display: inline-block;
margin-right: 3px;
}
.margin-item li span{
display: inline-block;
vertical-align: top;
border: 2px solid #11A7A0;
width: 100px;
height: 30px;
}
/*nth-of-type只是在父节点的子节点中同类型标签*/
.margin-item li:nth-of-type(5n){
margin-right: 0;
margin-bottom: 3px;
}
.margin-item li:last-of-type{
margin-right: 0;
}
</style>
</head>
<body>
<h1>nth-child(3)：选择某元素下的第三个元素</h1>
<ul class="item item1">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
<li><span>11</span></li>
<li><span>12</span></li>
<li><span>13</span></li>
</ul>
<br/>
<h1>nth-child(n + 6)：选择第6个元素之后的</h1>
<ul class="item item2">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
<li><span>11</span></li>
<li><span>12</span></li>
<li><span>13</span></li>
</ul>
<br/>
<h1>nth-child(-n + 4)：选择第4个元素之前的</h1>
<ul class="item item3">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
<li><span>11</span></li>
<li><span>12</span></li>
<li><span>13</span></li>
</ul>
<br/>
<h1>nth-child(4n + 1)：间隔3个选一个</h1>
<ul class="item item4">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
<li><span>11</span></li>
<li><span>12</span></li>
<li><span>13</span></li>
</ul>
<br/>
<h1>nth-child(5n)：每5个换行</h1>
<ul class="margin-item">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span></span></li>
<li><span></span></li><br/>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span></span></li>
<li><span></span></li><br/>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</body>
</html>