关于:last-child的误解

先上一段菜鸟教程中对它的用法的解释：

:last-child选择器用来匹配父元素中最后一个子元素。

我也是这么一直简单地认为的。然而这样的理解其实是不全面的。最近有遇到一个场景是选中列表中的最后一项为它添加边框。我就照着我的理解写了（错误示范）：

    <ul class="container"><li class="item">one</li><li class="item">two</li><li class="item">three</li></ul>

   .item {margin-bottom: 10px;}.container:last-child{border: 1px solid #000000}

本以为会选中<ul>中的最后一个<li>，结果却啥效果也没有：

经过一番搜索才明白，:last-child实际上是一个伪类。它与其他选择器搭配使用的真正过程应该是：
比如：selector:last-child

查找与selector选择器匹配的所有同级元素
在所有同级元素中查找最后一个元素
检查这最后一个元素与selector是否匹配

所以开头的场景的正确示范应该是:

  .container .item:last-child {border: 1px solid #000000;}

达到效果：

参考文档：
https://www.runoob.com/cssref/sel-last-child.html
https://www.cnblogs.com/yzhihao/p/11593871.html

如果感到这篇文章对你有用，麻烦点个赞~

关于:last-child的误解相关推荐

事务隔离级别神话与误解
在今天的文章里我想谈下SQL Server里现存的各种事务隔离级别的神话和误解.主要我会谈谈下列话题: 什么是事务隔离级别(Transaction Isolation Levels)? NOLOCK从 ...
容易被误解的overflow:hidden
为了页面的健壮性,我们常常需要使用overflow:hidden.有时候是为了防止布局被撑开,有时候是为了配合其它规则实现文字截断,还有时候纯粹是为了创建块级上下文.但是,很多人对这个属性是存在着一定 ...
oracle 提示:ORA-02292:integrity constraint(xxxxxxx) violated - child record found
当我们删除数据的时候 oracle 提示:ORA-02292:integrity constraint(xxxxxxx) violated - child record found 这种情况呢是因为 ...
中小企业对于云计算的3大误解
在本文中,CIO.com网站的Paul Mah将为广大读者破除中小型企业对于云计算采用的三大的误区. 现如今,中小企业的创业道路可谓是举步维艰,而试图推动中小企业的进一步成长更是一件难上加难的事情.但 ...
对于5G通信我们可能都有一点误解
"4G都还没用上,5G就要来了?"."5G来了?那么房子不是一夜归移动,一小时估计就能归移动了",这是我在很多关于5G文章下能找到最多的评论.在移动行业里面,已 ...
CF438E The Child and Binary Tree（有意思的生成函数 + 多项式求逆 + 多项式开方）
整理的算法模板合集: ACM模板点我看多项式全家桶(●^◡_◡◡^●) CF438E The Child and Binary Tree 简单的黑题首先我们发现模数为99824435399824 ...
肝了3版才满意：分布式系统之CAP理论，我们对它的理解和误解
引言 CAP 理论,相信很多人都听过,它是指: 一个分布式系统最多只能同时满足一致性(Consistency).可用性(Availability)和分区容错性(Partition tolerance) ...
存在就不插入_DOM 插入节点和三个Child方法
插入节点 insertBefor(); 插入格式:父节点.insertBefor( 插入节点,旧节点 )功能:将插入的节点插入到旧节点之前举个小例子:创建一个strong节点,将这个节点插入到span ...
订单少落地难：被误解的人工智能
人工智能落地现状 2020年人工智能依然是一个非常热的话题.中美的科技巨头以及很多跨国企业都把人工智能作为其战略发展的重要布局,国家层面也出台政策重点发展人工智能产业.2019年,中国人工智能专利申请 ...
关于自动驾驶汽车的7大误解
https://www.toutiao.com/a6701453115930968579/ 在这里,我们就介绍一下有关自动驾驶汽车的7个真相-- 据外媒报道,自动驾驶汽车有望成为一项具颠覆性的技术,给 ...

关于:last-child的误解

关于:last-child的误解相关推荐

最新文章

热门文章