• 公式：a * n的倍数 + b; （n是从0，1，2...开始）

• :nth-of-type(an + b)：是基于相同的兄弟标签元素匹配

• 
  

   div p:nth-of-type(1){
          background-color: orange;
   }

   <div>
        <h3>这是h3</h3>
        <p>2</p>
   </div>

• 公式：a * n的倍数 + b; （n是从0，1，2...开始）

• :nth-child(an + b)：是基于父元素下的子标签元素进行匹配

     div p:nth-child(3){
          background-color: orange;
     }

    div p:nth-child(0n + 3){
          background-color: orange;
    }

• 2n表示2的倍数

• 3n表示3的倍数等等

     div p:nth-child(2n){
          background-color: orange;
     }

     div p:nth-child(2n + 0){
          background-color: orange;
     }

     div p:nth-child(even){
          background-color: orange;
     }

• 匹配奇数；2n+1，也就是从1起始，每次+2的倍数

  div p:nth-child(2n + 1){
      background-color: orange;
   }

  div p:nth-child(odd){
      background-color: orange;
   }

• 从位置3起始，每次 + 2的倍数（3，5，7...）

div p:nth-child(2n + 3){
       background-color: orange;}

• 从位置5起始，每次 + 3的倍数（5，8，11...）

   div p:nth-child(3n + 5){
        background-color: orange;
    }

• 从第n个元素起始

    div p:nth-child(1n + 3){
          background-color: orange;
    }

    div p:nth-child(n + 3){
          background-color: orange;
    }

or

    div p:nth-of-type(n + 3){
         background-color: orange;
    }

• (n), (1n), (1n + 1) 匹配所有p元素

   div p:nth-child(n){     
         background-color: orange;
    }

作者：Peter_2B
链接：https://www.jianshu.com/p/2add074c6d65
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。