4回答

• 

  timwu

  2016-01-24 15:49:32

  :first-child 表示的范围是：某父元素的第一个子元素。而 e:first-child 表示的范围是：某父元素的第一个子元素是 e 的元素。那么，

  .wrapper > div:first-child 表示的是：.wrapper 下的第一个子元素是 div 的元素，而

  <div class="wrapper">

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

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

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

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

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

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

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

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

  </div>

  .wrapper 下的第一个子元素不是 div 而是 p ，所以，选择不上元素。

  而 .wrapper > p:first-child 才是所谓的“正确”选择，即

  .wrapper 下的第一个子元素是 p 的元素，满足代码，可以选择！

  
  

  0 2
• 

  化龙贝

  2015-06-29 20:56:28

  :first-child

  这个选择器的意思是，当前元素的父元素之下的第一个同类元素

  0 0
• 

  Sharon_zd

  2015-06-29 00:51:50

  但这并不是原因，如果css里改为ul>p:first-child，p就可以显示为红色了。即便我不用ul，用div也存在一样的问题，只要子元素列表项不全为一样的或者:first-child前的元素不在第一项的地方，使用:firt-child就找不到第一个子元素。就什么效果也没有，不信你试试。。

  <div class="wrapper">

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

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

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

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

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

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

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

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

  </div>

  使用

  .wrapper>div:first-child {

    background: orange;

  }

  没有效果，

  使用

  .wrapper>p:first-child {

    background: orange;

  }

  才有效果。

  3 0

  米飯

  不好意思，我的回答有错误。错了错了。

  2015-08-07 19:21:56

  共 3 条回复 >

• 

  化龙贝

  2015-06-28 06:46:05

  亲，ul子元素不允许放置除除li外的任何元素

  1 0

  Sharon...

  但这并不是原因，如果css里改为ul>p:first-child，p就可以显示为红色了。即便我不用ul，用div也存在一样的问题，只要子元素列表项不全为一样的或者:first-child前的元素不在第一项的地方，使用:firt-child就找不到第一个子元素。就什么效果也没有，不信你试试。。

  2015-06-29 00:52:30

  共 1 条回复 >