css3 中的 nth-child

:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。

1. e:first-child

选取第一个元素，在css添加

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

2.e.last-child

选取最后一个元素

li:last-child{
    background-color: pink;
}

3.e.nth-child(number)

选取里面第几个的元素

li:nth-child(4){
    background-color: plum;
}

4 e.nth-child(2n);

选取里面偶数元素

li:nth-child(2n){
    background-color: green;
}

5.e:nth-child(2n-1)

选取里面奇数的元素

li:nth-child(2n-1){
   background-color: #ffabcd;
}

6.e:nth-child(n+3)

选取从里面第三个开始到最后一个

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

7.e:nth-child(-n+3)

选取从0到第三个的所有元素

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

8.e:nth-last-child(3)

选取倒数第三个元素

li:nth-last-child(3){
   background-color: #ffabcd;
}

9.e:nth-last-child(n+3)

选取从倒数第三到第一个之间的元素

li:nth-last-child(n+3){
   background-color: #ffabcd;
}