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，用法都是一样的！！