n番目の子（）n番目の-の型与（）

1. n番目の子

：n番目の子（n）はセレクタと一致する親要素のN番目の要素に属します。n 可以是数字、关键词或公式
次のようなセクションの構造：

  <div class="box">
      <div class="item">1</div>
      <div class="item">2</div>
      <p class="item">3</p>
      <p class="item">4</p>
      <div class="item">5</div>
      <div class="item-div">6</div>
      <div class="item-div">7</div>
      <div class="item-div">8</div>
  </div>

クラス要素という項目を加えた背景色に：

.item:nth-child(3) {
   background-color: #f7c892;
}

前記第nの型

:nth-of-type(n)セレクタ一致親要素に属する特定类型（タグタイプしなければならない如 div、p、spanのn番目の要素の）各要素。
上記と同じ例で、スタイルを追加していきます。

.item:nth-of-type(2) {
   background-color: #56824b;
}

.item要素の型がある場合div、 pその第二のヒットdiv、pラベルの名前を入力item要素を。

.item-div:nth-of-type(4) {
   background-color: #986244;
}

.item-divそこにそのdivのタイプのdivの要素であり、第4のクラスという名前のヒットどこ.item-divの要素を。

---

プロット：
https://jsfiddle.net/n8f05sb6/7/
参考記事：
CSS3疑似クラスセレクタn番目の子とn番目の-の型分析

ます。https：//www.jianshu.com/p/cd5f944b8023で再現