css 关于nth-child的使用

 

    要求列表的奇数行与单数行的背景颜色不同

 

li:nth-child(2n){
        background:     rgba(20,55,120,0.2)
      }

 

除了上述使用较多的情况，还有

// 第一行背景有颜色
li:first-child{
        background:     rgba(20,55,120,0.2)
      }

// 最后一行背景有颜色
li:last-child{
        background:     rgba(20,55,120,0.2)
      }

// 第4行背景有颜色
li:nth-child(4){
        background:     rgba(20,55,120,0.2)
      }

// 倒数第2行背景有颜色
li:nth-last-child(2){
        background:     rgba(20,55,120,0.2)
      }

// 奇数行背景有颜色
li:nth-child(2n-1){
        background:     rgba(20,55,120,0.2)
      }

li:nth-child(2n+1){
        background:     rgba(20,55,120,0.2)
      }

li:nth-child(odd){
        background:     rgba(20,55,120,0.2)
      }

// 偶数行背景有颜色
li:nth-child(2n){
        background:     rgba(20,55,120,0.2)
      }

li:nth-child(even){
        background:     rgba(20,55,120,0.2)
      }

// 前3行背景有颜色
li:nth-child(-n+3){
        background:     rgba(20,55,120,0.2)
      }

// 第5行及以后全部背景有颜色
li:nth-child(n+5){
        background:     rgba(20,55,120,0.2)
      }

// 倒数第3行及之后全部背景有颜色
li:last-child(-n+5){
        background:     rgba(20,55,120,0.2)
      }

// 倒数第2行及之前全部背景有颜色
li:last-child(n+2){
        background:     rgba(20,55,120,0.2)
      }