(CSS):last-child与:last-of-type区别
2024-09-07 10:21:07
<!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元素节点,所以只能找到第三行了。
最新文章
- JAVA使用JDBC技术操作SqlServer数据库
- EntityFramework 数据库的迁移
- 【转】4G内存下MySQL修改配置文件以优化效率(来自discuz)
- java闭包
- linux部分命令
- java微信开发(wechat4j)——发送客服消息
- C# 使用命令行编译单个CS文件
- MVC开发Markdown编辑器(1)
- poj 1472(递归模拟)
- centos 安装openssl 以及库文件
- Umbraco 上传文件到另一个文件夹,而不是media files
- vs2010常用快捷方式
- Swift开发之 使用系统的TabbarController
- yum安装jdk
- Bitmap的加载与缓存
- AndroidStudio意外崩溃,电脑重启,导致重启打开Androidstudio后所有的import都出错
- WDA-WebDynpro Demo &; FPM Demo
- EMC现场测试-EFT、ESD、Surge和场辐射
- 【BZOJ4195】[Noi2015]程序自动分析 并查集
- 图解HTTP之HTTPS详解
热门文章
- 【.net core】电商平台升级之微服务架构应用实战
- 测试必知必会系列- Linux常用命令 - mv
- Java8函数式编程以及Lambda表达式
- Linux常用命令 - wget命令详解(重点)
- 实用干货丨如何使用Prometheus配置自定义告警规则
- iOS 原生库(AVFoundation)实现二维码扫描,封装的工具类,不依赖第三方库,可高度自定义扫描动画及界面(Swift 4.0)
- Dapper解析嵌套的多层实体类
- C语言实现strcat / strlen / strcmp / strcpy
- Servlet(二)----注解配置
- Java并发编程(03):多线程并发访问,同步控制