css伪类 nth-of-type & nth-child

• 公式：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;
    }

---