:nth-child(n)与:nth-of-type(n)

<div id='parent'>
  <h1>第一章</h1>
  <ul class='list1'>
    <li>test1</li>
  </ul>
    <h1>第而章</h1>
  <ul class='list2'>
    <li>test2</li>
  </ul>
</div>

:nth-child(n) css2

如上结构，如果想选择第一个 ul，使用 :nth-child(n) 伪元素选择器，.parent:nth-child(n) 伪元素选择会先选取 div 中的所有子元素，所以第一个子元素是 h1，选取 h1 的css写法 .parent:nth-child(1)。 第二个子元素是ul.list1，选取 ul.list1 的css写法 .parent:nth-child(2).依次类推

:nth-of-type(n) css3 只会匹配父元素下的某一类标签，比如 .parent:nth-of-type(n)

如上结构，如果想选择第一个 ul，使用 :nth-of-type(n) 伪元素选择器，.parent:nth-of-type(n) 伪元素选择会先选取 div 中的所有ul子元素，所以第一个子元素是 ul.list1，选取 ul.list 的css写法 .parent:nth-of-type(1)。 第二个子元素是 ul.list2，选取 ul.list2 的css写法 .parent:nth-of-type(2).依次类推