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