例項

例項1

選擇屬於父元素div的第三個子元素span，以及屬於父元素div的第六個子元素span。

  <style>
    span:nth-child(3){
      color: #ff0000;
    }
    span:nth-child(6){
      color: #3333ff;
    }
  </style>

<div>
    <p>第一個p元素</p>
    <p>第二個p元素</p>
    <span>行內元素1</span>
    <p>
 
第三個P元素</p>
    <p>第四個P元素</p>
    <span>行內元素2</span>
    <p>第五個p元素</p>
    <span>最後一個span元素</span>
  </div>

執行效果如下： 通過執行效果可以看出，屬於其父元素的第三個子元素的span元素為藍色，屬於其父元素的第六個子元素的span元素為紅色。

例項2

如果我想要選中屬於其父元素的第三個子元素的p元素呢，有符合條件的p元素嗎？

  <style>
    p:nth-child(3)
 
{
      color: #ff0000;
    }
  </style>

<div>
    <p>第一個p元素</p>
    <p>第二個p元素</p>
    <span>行內元素1</span>
    <p>第三個P元素</p>
    <p>第四個P元素</p>
    <span>行內元素2</span>
    <p>第五個p元素</p>
    <span>最後一個span元素</span
 
>
  </div>

執行效果如下： 上面給出的樣式是想將屬於父元素div的第三個子元素p變成紅色，但是，div的第三個子元素是span。所以並沒有符合條件的p元素存在，當然也不會有對應的效果了。

例項3

選擇屬於其父元素div的第三個p元素，以及屬於其父元素div的第一個span元素。

 <style>
    body{
      background-color: #cccccc;
    }
    p:nth-of-type(3){
      color: #ff0000;
    }
    span:nth-of-type(1){
      color: #3333ff;
    }
  </style>

<div>
  <p>第一個p元素</p>
  <p>第二個p元素</p>
  <span>行內元素1</span>
  <p>第三個P元素</p>
  <p>第四個P元素</p>
  <span>行內元素2</span>
  <p>第五個p元素</p>
  <span>最後一個span元素</span>
</div>

執行效果如下： 由上圖可以看出，nth-of-type是根據型別來選擇的，碰到同一型別就+1。

例項4

選擇屬於父元素div的第四個子元素p，以及選擇屬於父元素的第四個p元素。

<style>
  body{
    background-color: #cccccc;
  }
  p:nth-child(4){
    color: #ff0000;
  }
  p:nth-of-type(4){
    color: #3333ff;
  }
</style>

<div>
  <p>第一個p元素</p>
  <p>第二個p元素</p>
  <span>行內元素1</span>
  <p>第三個P元素</p>
  <p>第四個P元素</p>
  <span>行內元素2</span>
  <p>第五個p元素</p>
  <span>最後一個span元素</span>
</div>

效果如下所示：

總結

nth-chid ：根據個數來計算 nth-of-type ：根據型別來計算