<!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. 编译 AR9271 wifi 网卡固件 htc_9271.fw

    下载最新的固件源码https://github.com/qca/open-ath9k-htc-firmware/archive/1.4.0.zip得到 open-ath9k-htc-firmware- ...

  2. C语言程序设计（四） 键盘输入和屏幕输出

    第四章 键盘输入和屏幕输出 转义字符 \n 换行,光标移到下一行的起始位置 \r 回车(不换行),光标移到当前行的起始位置 \0 空字符 \t 水平制表 \v 垂直制表 \b 退格 \f 走纸换页 \ ...

  3. Top命令你最少要了解到这个程度

    top命令几乎是每个程序员都会用到的Linux命令.这个命令用来查看Linux系统的综合性能,比如CPU使用情况,内存使用情况.这个命令能帮助我快速定位程序的性能问题. 虽然这个命令很重要,但是之前对 ...

  4. computed 里面 不能写箭头函数 都要写 function () {} 否则页面会都不显示

    computed 里面 不能写箭头函数 都要写 function () {} 否则页面会都不显示

  5. 2016 Multi-University Training Contest 1 T3

    题目要求出所有合法点对间的最短路径的平均值,因此我们应当求出所有合法最短点对的最 短路径之和,再除以合法点对个数. 题目中Guard之间有着很不自然的制约关系,每个Guard的周围和同行.列都不能有其 ...

  6. python enumerate用法总结（转）

    原文链接:https://blog.csdn.net/churximi/article/details/51648388 enumerate()说明 enumerate()是python的内置函数en ...

  7. Natas12 Writeup（文件上传漏洞）

    Natas12: 文件上传页面,源码如下: function genRandomString() { $length = 10; $characters = "0123456789abcde ...

  8. C++中 string 中的方法的使用详解

    string 字符串在所有的语言中都非常重要,c++也不例外,接下来我们将介绍string中的常用方法 1. size() 和 length() 函数 : 他们返回字符串的真实长度,且不会因为空格而截 ...

  9. 为什么我推荐你用Ubuntu开发？

    前言: 鱼哥在做多媒体开发时,领导倒逼我们用Ubuntu开发,后来才发现它的牛逼和高效.所以对于还在用Windows上开发的朋友,鱼哥建议,趁周末,搞个双系统,切到Ubuntu上开发, Ubuntu最 ...

  10. SpringMVC最详细笔记partⅠ

    一.springMVC-quickStar 解决maven加载项目过慢 archetypeCatalog internal 导入依赖 <!-- 版本锁定 --> <propertie ...