:first-child和:last-child学习笔记
刚在折腾主题的时候发现的一个小问题,我很好奇。
首先介绍下:first-child伪类,即选择第一个对象。
例如:
<div class="loop">测试测试测试测试测试测试测试测试测试</div>
<div class="loop">测试测试测试测试测试测试测试测试测试</div>
<div class="loop">测试测试测试测试测试测试测试测试测试</div>
在css中可以使用.loop:first-child给第一个层单独定义样式。同理,可以使用.loop:last-child给最后一个层单独定义。
出现问题
如果在下面加上一行:
<div class="loop">测试测试测试测试测试测试测试测试测试</div>
<div class="loop">测试测试测试测试测试测试测试测试测试</div>
<div class="loop">测试测试测试测试测试测试测试测试测试</div>
<div>我是没有样式来捣乱的</div>
那么.loop:last-child就会失效,不会作用于任何div。同理,如果在前面加上一个div,那么.loop:first-child也会失效。
解决办法
使用一个div将所有.loop包裹,即:
<div>
<div class="loop">测试测试测试测试测试测试测试测试测试</div>
<div class="loop">测试测试测试测试测试测试测试测试测试</div>
<div class="loop">测试测试测试测试测试测试测试测试测试</div>
</div>
<div>我是没有样式来捣乱的</div>
那么.loop:last-child就有效了,同理.loop:first-child。
补充
根据结构不同,在部分情况下可能只会出现:last-child失效。总之只要两个中一个出了问题,就极可能是使用此样式的层没有被整个包裹起来。
您可能感兴趣的文章:
:first-child和:last-child学习笔记
CSS3选择器之学习笔记
JQuery 学习笔记 选择器之六
jQuery学习笔记之jQuery选择器的使用
css/jquery实现移除HTML中最后和第一个元素的间距(margin)
jquery CSS选择器笔记
jQuery温习篇 强大的JQuery选择器
jQuery Selectors(选择器)的使用(七、子元素篇)
juqery 学习之三 选择器 子元素与表单
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)