首先,第一个子元素,你可以理解为大儿子.  

.wrapper>p:first-child    .wrapper的大儿子必须是p, 不然你将什么都选择不到.如果大儿子是P,你选择的就是这个p了.

.wrapper>p:first-of-type   所有p儿子中第一个p就行了,不用管他是不是大儿子.

这两个选择器针对是子元素,不是后代元素.所以什么孙子P,曾孙子P,曾曾孙子P都不考虑在里面.

p：first-child

如果想选中，则p必须为第一个子元素。否则无法匹配

p:first-of-type{}

无论p在父节点中的哪个位置，总能选中第一个p元素

当子元素就一种：比如都是p时，使用.wrapper>p:first-child（实验了一下这种情况下使用.wrapper>p:first-of-                               type也是可以的）

当子元素有多种：比如有p，div等时，使用.wrapper>p:first-of-type

详细看这篇文章的解释

https://www.cnblogs.com/2050/p/3569509.html

.wrapper>p:first-child 指的是.wrapper的子元素p，并且要求这个p是.wrapper的第一个子元素；

.wrapper>p:first-of-type 指的是.wrapper的后代元素中的第一个p元素。

我把原先题目的代码做了点修改，把第一个p元素放在div里面，

<div class="wrapper">

  <div>

      <p>我是第一个段落</p>

  </div>

  <p>我是第二个段落</p>

  <div>我是第一个Div元素</div>

  <div>我是第二个Div元素</div>

  <p>我是第三个段落</p>

  <p>我是第四个段落</p>

</div>

这个时候，此p为最外层div的孙子，所以.wrapper>p:first-child查不到对应的元素；但此p为最外层div底下的第一个p类型，所以.wrapper>p:first-of-type对应的就是这个p元素。

.wrapper>p:first-child

就是在p标签内的第一个元素，

.wrapper>p:first-of-type

是.wrapper中第一个p元素，比如尽管<div class=.wrapper>

<div>111</div>

<div>222</div>

<p>我是被选中的</p>

<div>33</div>

<p></p>

</div>