nth-child和nth-of-type的区别和用法(选择器)

样式：p:nth-child(2){color:red;}
样式：span:nth-of-type(2){color:red;}

<div>
  <p>1</p>
  <p>2</p>//变红
</div>

<div>
  <em></em>
  <p>1</p>//变红
  <p>2</p>
</div>

<div>
  <em></em>
  <em></em>
  <p>1</p>
  <p>2</p>
</div>

<div>
  <span>1</span>
  <span>2</span>//变红
</div>

<div>
  <em></em>
  <span>1</span>
  <span>2</span>//变红
</div>

<div>
  <em></em>
  <em></em>
  <span>1</span>
  <span>2</span>//变红
</div>

<div>
  <em></em>
  <span>1</span>
  <em></em>
  <span>2</span>//变红
</div>

p:nth-child(3)伪类选择器的要求1：这个元素是选定的元素（例如：p），2：这个后面的数字表示所有子元素中的第3个
span:nth-of-type(3)伪类选择器要求1:这个元素是选定的元素（例如span）2：在父级元素中所有子元素span的第3个。
推荐文章：http://www.cnblogs.com/dolphinX/p/3347713.html