两个都可以选择元素的兄弟节点

不同的是nth-of-type规则作用的范围是与元素类型一致的兄弟节点

nth-child规则作用的范围是所有兄弟节点（选择了范围之后，再判断是否与元素类型一致）

示例： 在线查看

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style>
/* 不起作用，因为第三个不是p标签 */
.test01 p:nth-child(3){
  color: red;
}

.test01 a:nth-child(3){
  color: red;
}

.test02 p:nth-of-type(3){
  color:red;
}
</style>
<body>
<section class="test01">
	<h1>try&nbsp;nth-child</h1>
	<p>1st p</p>
	<a href="#">I'm not p!</a>
	<p>2st p</p>
	<p>3st p</p>
</section>
<hr>
<section class="test02">
	<h1>try&nbsp;nth-of-type</h1>
	<p>1st p</p>
	<a href="#">I'm not p!</a>
	<p>2st p</p>
	<p>3st p</p>
</section>
</body>