css选择器nth-child与nth-of-type的区别

实例

实例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-child ：根据个数来计算
nth-of-type ：根据类型来计算