个回答

• 慕仙1205856

  2019-12-16 17:02:29

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

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

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

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

  
  

  
  

  0

• someOne_forward

  2019-12-05 10:27:55

  p：first-child

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

  p:first-of-type{}

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

  0

• weibo_我在四年后等你_03978156

  2018-10-05 16:00:01

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

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

  0

• 慕尼黑8233914

  2018-08-13 16:06:36

  详细看这篇文章的解释

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

  6

• qq_long妹_0

  2018-05-15 19:06:56

  .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元素。

  0

• 慕斯卡1891739

  2018-05-07 16:21:06

  .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>

  
  

  0