<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>last-child 和 last-of-type区别</title>
<style type="text/css">
p:last-child{
color: red;
}

p:last-of-type{
color: blue;
}

</style>
</head>
<body>
<div>
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
<span>我是测试行</span>
</div>
</body>
</html>

运行的结果显示：没有任何一行显示为红色，第三行显示为蓝色。或许你可能会觉得两个选择器选中的是同一行，但是当你注释掉蓝色选择器的时候会发现，红色依然未被选中。

其实红色未被选中的原因很简单，上篇文章已经讲过，这里简单的描述一下

:last-child选择父节点最后一个子节点，并且与选择器进行匹配， 父节点div的最后一个节点是span，而匹配的选择器是p,两者不对应所以匹配不上。

而另外一个选择器

:last-of-type是从父节点的子节点中寻找最后一个与选择器相同的子节点，也就是说，这次寻找的并不是最后一个节点，而是最后一个P元素节点，所以只能找到第三行了。

(CSS):last-child与:last-of-type区别的更多相关文章

  1. css中zoom和transform:scale的区别

    css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...

  2. (转)css内边距与外边距的区别，精辟啊

    css内边距与外边距的区别 (2012-05-02 13:54:54) 转载▼ 标签: 杂谈 分类: css 本文也是网上看了后收藏的,忘了原地址(以后收藏文章得注意) 你真的了解margin吗?你知 ...

  3. CSS display:inline和float:left两者区别探讨

     本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...

  4. linux中查找命令find、locate、whereis、which、type区别

    linux中查找命令find.locate.whereis.which.type区别 1. find Java代码 find是最常见和最强大的查找命令,你可以用它找到任何你想找的文件.与查询数据库(/ ...

  5. CSS的width:100%和width:auto区别

    CSS的width:100%和width:auto区别 一.   问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...

  6. css height:100%和height:auto的区别

    css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...

  7. css选择器中:first-child 与 :first-of-type的区别

    ## css选择器中:first-child 与 :first-of-type的区别 ---- :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比 ...

  8. 添加css的方式：link与@import区别

    如何在html中添加css? 在html中设置css共有三种方式,分别是: 行内式 内嵌式 导入式-link 导入式-@import 1.行内式.即在html标签中的style属性中设置css,值得注 ...

  9. css内边距与外边距的区别

    你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...

  10. CSS中link和@import的使用区别

    我们都知道在html中引入外部的CSS 有2种方式,link标签和@import,他们又什么区别呢? 1.从属关系区别@import是 CSS 提供的语法规则,只有导入样式表的作用:link是HTML ...

随机推荐

  1. SUCTF checkin

    复现的时候看了源码...... 发现文件上传时会对文件内容以及后缀进行严格的检测 同时还有exif_imagetype   这个就用图片马就行绕过,绕过文件后缀试一下传图片马解析为php 但是常规解析 ...

  2. 2019-2020-2 20175226 王鹏雲 网络对抗技术 Exp2 后门原理与实践

    2019-2020-2 20175226 王鹏雲 网络对抗技术 Exp2 后门原理与实践 实验内容 使用netcat获取主机操作Shell,cron启动: 使用socat获取主机操作Shell, 任务 ...

  3. 17 Spring Data JPA的常用接口分析

    思考 在客户的案例中,我们发现在自定义的CustomerDao中,并没有提供任何方法就可以使用其中的很多方法,那么这些方法究竟是怎么来的呢?答案很简单,对于我们自定义的Dao接口,由于继承了JpaRe ...

  4. 【Python】2.14&2.15学习笔记 运算符与表达式

    太爽了,今天可以尽情熬夜了,明天不上课,可以学一整天\(Python\) 运算符 \(+,-,*,%\)就不说了,说几个和\(c\)不太一样的 除法 print( 5/3 ) 输出了\(1.66666 ...

  5. Requests发Post请求data里面嵌套字典

    一.Post请求,data里面嵌套字典 Requests发Post请求,data里面嵌套字典的常见形式如下: info = { "appid": "123", ...

  6. 【Weiss】【第03章】练习3.26：双端队列

    [练习3.26] 双端队列(deque)是由一些项的表组成的数据结构,对该数据结构可以进行下列操作: Push(X,D):将项X插入到双端队列D的前端. Pop(D):从双端队列D中删除前端项并返回. ...

  7. C#中无边框窗体拖动

    //定义一个bool变量标识是否拖动窗体 private bool isMove = false; //记录鼠标的位置 private Point point; 定义的变量 /// <summa ...

  8. [Microsoft Teams]使用连接器接收Azure Devops的通知

    1. 什么是连接器 连接器(connector)是Teams中频道的一个接受消息的功能,官方的解释如下: 连接器允许用户订阅来自 web 服务的接收通知和消息. 它们公开服务的 HTTPS 终结点,通 ...

  9. nested exception is java.lang.StackOverflowError解析

    背景介绍: 项目是微服务的,使用docker容器,使用jenkins部署.测试环境有个公共服务一直以来都能正常发布,突然有一天不行了,经常发布失败,然后多发布几次就好了. 报错如下: 是栈溢出了,一般 ...

  10. Web_Servlet—— Servlet生命周期

    第4章 Servlet生命周期(重要) 4.1 Servlet生命周期概述 1,应用程序中的对象不仅在空间上有层次结构的关系,在时间上也会因为处于程序运行过程中的不同阶段而表现出不同的状态和不同的行为 ...