css选择器 last-child & last-of-type

Pines_Cheng 发布于2019-08-30 15:44 / 1298人阅读

摘要：同理表示其父元素的最后一个子元素，且这个元素是指定的元素，才可以生效。例子弊端对于元素选择伪类比较准确，但是对于类选择器选择伪类可能就会不太准确例子现在看例子一正常情况的没有干扰元素的下面全部都是结果两个都会对最后一个生效。

last-child【同理first-child】
:last-child表示其父元素的最后一个子元素，且这个元素是css指定的元素，才可以生效。

last-of-type【同理first-of-type】
:last-of-type表示其父元素的最后一个指定类型的元素

这两个区别就是last-child必须要多具备一个条件，就是必须是父元素的最后一个子元素，强调的是最后child，而last-of-type只要符合最后一个type就可以。【例子1 2 】

弊端：对于元素选择伪类比较准确，但是对于类选择器选择伪类可能就会不太准确【例子 3 4】

现在看例子：

一、正常情况的没有干扰元素的ul下面全部都是li

html

css

结果：两个都会对最后一个li生效。

last-child

last-of-type

二、ul下面不止有li，还有其他的元素，这个在实际场景中也是会出现的

html

css

结果： last-child选不中目标元素，last-of-type可以选择目标元素

last-child

last-of-type

三、选择某类的最后一项

html

css
][11]

结果： last-child与last-of-type均不会选中某类的最后一项

.line:last-child与.line:last-of-type

四、父元素下同类名不同元素选择最后一个类名

html

css

结果：last-child选中既是最后一个子元素又是最后一个类名元素； last-of-type 会选择不同元素的最后一项子类

.line:last-child

.line:last-of-type

GPU云服务器云服务器 css选择器基础选择器css css选择 js css 加载器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116293.html

xpath&amp;css选择器

摘要：选取所有拥有名为的属性的元素。选取元素的所有元素，且其中的元素的值须大于。且供选择的路径之间并无关联。选择当前节点的所有先辈。文本读取文件读取利用解析选择器转自阮一峰的网络日志基本选择器最基本的就是针对标签，类以及了。本文参考较多，原创基本没有，权当知识归纳。xpath并不复杂，简单的使用看完之后，及时查阅文档也是可以写出来的。这里放上我的练手文件，大家可以参考，或者挑毛病(^__^...

niceforbear 2019-08-29 13:13 评论0 收藏0
css3 伪类选择器快速复习

摘要：前言如果说作为前端开发的基本功那么选择器就是基础中的基础如果你在复写或者学习这些容易令人混淆的选择器那么你就来对地方了我的老伙计本篇文章会直接了当的比较它们的特性帮助你快速的掌握它们这两个选择器会匹配一前言如果说 css 作为前端开发的基本功, 那么选择器就是基础中的基础. 如果你在复写或者学习这些容易令人混淆的选择器, 那么你就来对地方了, 我的老伙计. 本篇文章会直接了当的...

MasonEast 2019-08-30 15:44 评论0 收藏0
CSS选择器整理

摘要：在及以下，伪类选择器与兄弟选择符一起使用会有一个，查看详情。一般用于输入框设置元素被选择时的字体颜色和背景颜色注意事项在使用时需要加上各个浏览器的前缀除了是，其他浏览器都是使用。总结选择器用得好其实可以让我们少些很多代码。很多人都觉得CSS特别简单，但其实真正写好CSS并不容易，CSS的每一点其实内容都很多，就拿选择器来说，CSS选择器大概可以分为五类：元素选择器关系选择器属...

张宪坤 2019-08-30 13:14 评论0 收藏0
CSS选择器

###CSS选择器 CSS3选择器规范地址： https://www.w3.org/TR/2011/REC-css3-selectors-20110929/ CSS3选择最新选择器规范: https://www.w3.org/TR/selectors !---问题---! 　　1.css的全称是什么？　　　　Cascading style sheets 　　2.样式表的组成...

Bryan 2019-04-23 13:13 评论0 收藏0