CSS: :last-child 与 :first-child的坑

原文链接

前言

前端开发中，我们有时候要为第一个或最后一个元素设置进行某些特殊的操作。CSS默认为我们提供了:last-child和:first-child选择器，但是在实际使用中，要特别需要注意一个点。

开始

:last-child: 指定属于其父元素的最后一个子元素的 p 元素的背景色。（来自W3C的官方描述）

实践

HTML:

<div class="div1"><h1>这是标题</h1><p>第一个段落。</p><div class="div2"><p>p, 第二个段落。</p><p>p, 第三个段落。</p><p>p, 第四个段落。</p><div class="div3">div, 我是最后的元素。</div></div><p>p, 第五个段落。</p>
</div>

CSS:

.div1{border: solid 1px green;
}
.div2{border: solid 1px orange;
}
.div3{border: solid 1px blue;
}
p:last-child
{background: pink;
}

效果图：

分析

在.div2中，最后一个元素为div标签，并未被:last-child选中。你可能会觉得，选择器中写的是p标签，没有选中div元素是理所当然的。

很多时候我们的需求是选中同一类名的最后一个元素，类似于.className:last-child。这时候你会发现如果父元素的最后一个元素不是.className的元素，它同样不会被选中。（可以将有同一类名的元素包裹一个父div已达到效果）

总结

select:last-child: 选择父元素的最后一个子元素，且同时满足select条件的。两者缺一不可！

本文给出的例子相对简单，只分析了:last-child, :first-child也是同样的。希望大家自己多动手实践实践，或许能有不同的收获呢，加油↖(^ω^)↗（了解更多）

嘘寒问暖不如打笔巨款~

CSS: :last-child 与 :first-child的坑相关推荐

html选择器有哪些child,css3选择器child有哪些？css3选择器child用法详解
本篇文章给大家带来的内容是关于css3选择器child有哪些?css3选择器child用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 对于CSS3的结构伪类选择器,为了更好地 ...
antd 覆盖css样式不生效（antd避坑）
正确:直接复制类名, 不要整理格式! .MaxBox {background: #fff;min-height: 100vh;overflow: hidden;:global {.ant-form-i ...
最里层的是child元素
1. 简介 A convenience widget that combines common painting, positioning, and sizing widgets. Container ...
vue createElement后删除这个元素 the node to be removed is not a child of this node
项目场景: 描述:做的项目需要生成一行script标签后使用完再删除这个标签,以保持文件的简洁例如:再一个html里的生产一个script标签,使用完成后再删除这个script标签问题描述: 提示 ...
C++ Parent和Child继承分析
继续分析 1.继承实例分析 2.class Parent 1.继承实例分析 #include <iostream> #include <stdio.h> #include &l ...
1.定义一个Father和Child类，并进行测试。要求如下： 1）Father类为外部类，类中定义一个私有的String类型的属性name，name的值为“zhangjun”。 2）Child
1.定义一个Father和Child类,并进行测试. 要求如下: 1)Father类为外部类,类中定义一个私有的String类型的属性name,name的值为"zhangjun" ...
Cocoscreator报错 ERROR: Uncaught Error: child already added. It can't be added again
报错的的代码: this.parent.addChild(this.child); 非常简单的添加子节点的代码(也可以理解为添加父级) 运行的时候莫名奇妙的就爆出: ERROR: Uncaught E ...
在nodejs中创建child process
文章目录简介 child process 异步创建进程同步创建进程简介 nodejs的main event loop是单线程的,nodejs本身也维护着Worker Pool用来处理一些耗时的操 ...
api日常总结：前端常用js函数和CSS常用技巧
我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font- ...
“〜”（波浪号/波浪形/旋转）CSS选择器是什么意思？
本文翻译自:What does the "~" (tilde/squiggle/twiddle) CSS selector mean? Searching for the ~ ch ...

CSS: :last-child 与 :first-child的坑

原文链接

前言

开始

实践

分析

总结

CSS: :last-child 与 :first-child的坑相关推荐

最新文章

热门文章