<!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. 进程，线程，Event Loop(事件循环)，Web Worker

    线程,是程序执行流的最小单位.线程可与同属一个进程的其他线程共享所拥有的全部资源,同一进程中的多个线程之间可以并发执行.线程有就绪,阻塞,运行三种基本状态. 阮一峰大神针对进程和线程的类比,很是形象: ...

  2. Python魔法方法之 __call__

    前言 Python的魔法方法是指Python内部已经包含的,被双下划线所包围的方法,这些方法在特定的操作时会自动被调用.魔法方法可以使Python的自由度变得更高,当不重载魔法方法时它可以在规定的默认 ...

  3. 【视频+图文】Java基础经典练习题（一）输出2-100之间的素数，及素数个数

    目录 第一题:判断2-100之间有多少个素数,并输出所有素数. 1.视频讲解: 2.思路分析: 代码讲解:以i=4为例 4.为大家准备了彩蛋: 能解决题目的代码并不是一次就可以写好的 我们需要根据我们 ...

  4. 【Python】2.17学习笔记 移位运算符,逻辑运算符

    移位运算符 左移运算符 \(<<\),将对应的二进制数末尾补一颗零,高位自然溢出(遁入虚无 print( 5 << 2 ) 把\(5\)的二进制数左移两位 即把\(101\)变 ...

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

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

  6. dom4j解析xml格式文件实例

    以下给4种常见的xml文件的解析方式的分析对比: DOM  DOM4J  JDOM  SAX Dom解析    在内存中创建一个DOM树,该结构通常需要加载整个文档然后才能做工作.由于它是基于信息层次 ...

  7. Python3学习之路~9.4 队列、生产者消费者模型

    一 队列queue 当必须在多个线程之间安全地交换信息时,队列在线程编程中特别有用. 队列的作用:1.解耦,使程序直接实现松耦合 2.提高处理效率 列表与队列都是有顺序的,但是他们之间有一个很大的区别 ...

  8. 040.集群网络-CNI网络模型

    一 CNM网络模型 1.1 网络模型 生产环境中,跨主机容器间的网络互通已经成为基本要求,更高的要求包括容器固定IP地址.一个容器多个IP地址.多个子网隔离.ACL控制策略.与SDN集成等.目前主流的 ...

  9. ComplexBrowser: a tool for identification and quantification of protein complexes in large-scale proteomics datasets（大规模蛋白组学数据集中鉴定和定量蛋白复合物）

    文献名:ComplexBrowser: a tool for identification and quantification of protein complexes in large-scale ...

  10. vscode不能打开浏览器（Open browser failed!! Please check if you have installed the browser correctly!）

    vscode出现上述问题,我也查了很多相关资料,什么改默认浏览器设置什么的,改配置,改系统环境变量什么的,不但麻烦而且最后都难以成功. 下面分享一个可以解决的最简单办法.那就是:舍弃open in b ...