nth-child选择（小研究）

前言：我也不知道说什么，就是感觉这个还是挺有用的！！

---

先构造一下简单的列表

<style>
  *{
       margin:0;
       padding:0;
       list-style:none;
       text-decoration: none;
   }
   body{
       padding:50px;
   }
   li{
       display: inline-block;
       border:1px solid gray;
       padding:5px 10px;
       color:red;
       font-size: 10px;
   }
</style>
<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>
</ul>

---

第一个或者最后一个

li:first-child{
    color:blue;
 }
 li:last-child{
     color:blue;
 }

---

选择第几个

li:nth-child(2){
   color:blue;
}

---

选择前3个

li:nth-child(-n+3){
  color:blue;
}

---

从第四个到最后

li:nth-child(n+4){
  color:blue;
}

---

选择第二个到第五个

li:nth-child(n+2):nth-child(-n+5){
  color:blue;
}

---

奇数偶数

li:nth-child(even){
  color:blue;
}

li:nth-child(odd){
    color:blue;
}

---

等差数列

li:nth-child(3n+1){
  color:blue;
}

---

第三个到第七个之间的奇数行不包括3\7

li:nth-child(n+4):nth-child(-n+6):nth-child(2n+1){
   color:blue;
}

---

第三个到第七个之间的奇数行包括3\7

li:nth-child(n+3):nth-child(-n+7):nth-child(2n+1){
   color:blue;
}

---

选择最后两个

li:nth-last-child(-n+2){
  color:blue;
}

---

反选（:not）

li:not(:nth-child(2n+1)){
  color:blue;
}

---

扩展

如果列表中掺杂了其余的标签，不是纯粹的一样的标签的话就可以用nth-of-type，用法都是一样的！！