css nth-child用法

1. 选择第一个元素 :first-child

 li:first-child{
    color : red;
 }

2. 选择最后一个元素 :first-child

 li:last-child{
    color : red;
 }

3. 选择非最后一个元素 :not(:last-child)

 li:not(:last-child){
    color : red;
 }

4. 选择偶数行元素 :nth-of-type(odd)或:nth-child(2n)

 li::nth-of-type(odd){
    color : red;
 }

5. 选择奇数行元素 :nth-of-type(even)或:nth-child(2n-1)

 li::nth-of-type(even){
    color : red;
 }

5. 选择第n个元素 :nth-child(n)

  li:nth-child(1){
    color : red;
 }

6. 选择第倒数n个元素 :nth–last-child(n)

  li:nth-last-child(1){
    color : red;
 }

7. 选择前n个元素 :nth-child(-n+3) 【第一个到第三个】

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

8. 选择从第几个开始 :nth-child(n+3) 【第三个开始到最后】

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

9. 选择某一范围的元素 ::nth-child(-n+3):nth-child(n+3) 【第三个到倒数第三个之间的元素】

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