:first-child和:last-child那些事

刚在折腾主题的时候发现的一个小问题,我很好奇。

首先介绍下:first-child伪类,即选择第一个对象。

例如:

1
2
3
<div class="loop">测试测试测试测试测试测试测试测试测试</div>
<div class="loop">测试测试测试测试测试测试测试测试测试</div>
<div class="loop">测试测试测试测试测试测试测试测试测试</div>

在css中可以使用.loop:first-child给第一个层单独定义样式。同理,可以使用.loop:last-child给最后一个层单独定义。

出现问题

如果在下面加上一行:

1
2
3
4
<div class="loop">测试测试测试测试测试测试测试测试测试</div>
<div class="loop">测试测试测试测试测试测试测试测试测试</div>
<div class="loop">测试测试测试测试测试测试测试测试测试</div>
<div>我是没有样式来捣乱的</div>

那么.loop:last-child就会失效,不会作用于任何div。同理,如果在前面加上一个div,那么.loop:first-child也会失效。

解决办法

使用一个div将所有.loop包裹,即:

1
2
<div><div class="loop">测试测试测试测试测试测试测试测试测试</div><div class="loop">测试测试测试测试测试测试测试测试测试</div><div class="loop">测试测试测试测试测试测试测试测试测试</div></div>
<div>我是没有样式来捣乱的</div>

那么.loop:last-child就有效了,同理.loop:first-child。

补充

根据结构不同,在部分情况下可能只会出现:last-child失效。总之只要两个中一个出了问题,就极可能是使用此样式的层没有被整个包裹起来。

评论

  1. Tokin
    Tokin

    :first-child支持IE7+,:last-child貌似IE8都不行,我忘记了。。。

    回复