<!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. vue的插件使用

    插件通常是为Vue添加全局功能,vue的官网介绍了5中添加插件的方法. vue的插件有个公开方法install.第一个参数是Vue构造器,第二个参数是一个可选的选项对象. 在plugin.js中可以这 ...

  2. jenkins-构建job成功后自动打tag到git仓库

    需求:最近开发同事提出了个要求,每当Jenkins执行上线部署完成后,对当前代码进行自动打TAG到git仓库中,且只有当部署成功后才进行打TAG,防止构建失败也进行打过多的垃圾tag,然后便于下次进行 ...

  3. django实战商城项目注册业务实现

    设计到的前端知识 项目的前端页面使用vue来实现局部刷新,通过数据的双向绑定实现与用户的交互,下面来看一下需求,在用户输入内容后,前端需要做一些简单的规则校验,我们希望在在用户输入后能够实时检测,如果 ...

  4. python学习-练习题9*9乘法表巩固

    9*9乘法表 分析: 1X1为一行 1X2 2X2 为一行 for i in range(1,10): for j in range(1,i+1): print(str(i) + 'X' + str( ...

  5. nes 红白机模拟器 第4篇 linux 手柄驱动支持

    小霸王学习机的真实手柄,实测CPU 占用 80% 接线图: 手柄读时序: joypad.c 驱动: 普通的字符设备驱动. #include <linux/module.h> #includ ...

  6. qtp10安装步骤（比较完整）

    在安装qtp之前,要提前安装软件(不知道是干嘛的,反正安装就完了),右键--管理员运行完成安装,如下图: 解压qtp镜像: 双击setup: 第一步,点击第一排 第二步, 注:安装QTP系统提示“ 计 ...

  7. R语言实战（二） 创建数据集

    2.1 数据集的概念 不同的行业对于数据集的行和列叫法不同.统计学家称它们为观测(observation)和变量(variable),数据库分析师则称其为记录(record)和字段(field),数据 ...

  8. 关于QThread使用锁死的探索

    在学习使用QT5的时候,发现要使用多线程处理多任务,按照https://www.cnblogs.com/liming19680104/p/10397052.html等很多网上的方法,测试一下,发现我写 ...

  9. Rational Rose 2007破解版

    首先下载好软件,链接在这里 链接:https://pan.baidu.com/s/1op-W-ZX1tqefHffs3m-r0A 提取码:0jwm 这里面包含了Rational Rose 2007版的 ...

  10. 动手建立jdbc连接

    工具:Idea  Navicat 环境:jdk 1.8  mysql-5.7.27-winx64 创建一个project 打开navicat开启连接. 在idea中导入数据库. 导入好后可以开始连接了 ...