first child|:first-child和:last-child学习笔记

更新时间:2018-11-16    来源:面向对象编程    手机版     字体:

【www.bbyears.com--面向对象编程】

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

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

例如:

测试测试测试测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试
在css中可以使用.loop:first-child给第一个层单独定义样式。同理,可以使用.loop:last-child给最后一个层单独定义。
出现问题
如果在下面加上一行:

测试测试测试测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试
我是没有样式来捣乱的
那么.loop:last-child就会失效,不会作用于任何div。同理,如果在前面加上一个div,那么.loop:first-child也会失效。

解决办法
使用一个div将所有.loop包裹,即:


 测试测试测试测试测试测试测试测试测试
 测试测试测试测试测试测试测试测试测试
 测试测试测试测试测试测试测试测试测试

我是没有样式来捣乱的
那么.loop:last-child就有效了,同理.loop:first-child。

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

本文来源:http://www.bbyears.com/jsp/45853.html

猜你感兴趣