E:nth-child(n)  表示E父元素中的第n个字节点

p:nth-child(odd){background:red}/*匹配奇数行*/

p:nth-child(even){background:red}/*匹配偶数行*/

p:nth-child(2n){background:red}

E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算

E:nth-of-type(n)  表示E父元素中的第n个字节点，且类型为E

E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算 【先理解nth-of-type(n)】
E:empty 表示E元素中没有子节点。注意：子节点包含文本节点 ,例如<p></p>不能存在空格
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
E:only-child表示E元素的父元素只有一个子节点。注意：子节点不包含文本节点，【<div><b></b></div>  b:only-child】
E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点【
<p><span>123</span><a href="">456</a></p> 
p *:only-of-type
/*父级下某类型的标签仅有一个时该唯一元素会被选中*/
】
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>last-of-type与last-child区别</title>

    <style>

        *{margin:0; padding:0;}

        body *:last-of-type{

            height:30px;

            line-height:30px;

            border:1px solid red;

            background:yellow;

            margin-bottom:5px;

        }

    </style>

    </head>

<body>

   <p>001</p>

   <h5>111</h5>

   <p>002</p>

   <p>003</p>

   <h5>222</h5>

   <p>004</p>

   <p>005</p>

</body>

</html>

1-2:CSS3课程入门之结构选择的更多相关文章

  1. 1-3:CSS3课程入门之伪类和伪元素

    E:target 表示当前的URL片段的元素类型,这个元素必须是E E:disabled 表示不可点击的表单控件 E:enabled 表示可点击的表单控件 E:checked 表示已选中的checkb ...

  2. 1-1:CSS3课程入门之属性选择器

    div[name=jewave] 选取属性名为name且属性值是"jewave"的元素 div[name^=jewave]选取属性名为name且属性值以"jewave&q ...

  3. CSS3基础入门01

    CSS3 基础入门 01 前言 相对于css2来说,css3更新了很多的内容,其中包括选择器.颜色.阴影.背景.文本.边框.新的布局方案.2d.3d.动画等等. 而如果想要学习css3的诸多部分,不妨 ...

  4. HTML5+CSS3从入门到精通随书光盘 ISO 镜像视频教程​

    HTML5+CSS3从入门到精通(清华社“视频大讲堂”大系)通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于权威指南.高级程序设计.开发指南同类图书 ...

  5. HTML5+CSS3从入门到精通 中文pdf版​

    HTML5+CSS3从入门到精通是通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指南.高级程序设计.开发指南同类图书,本书是一本适合快速入手的 ...

  6. HTML5 & CSS3编程入门经典 ((美)Rob Larsen) pdf扫描版

    HTML和CSS是构建网页所需要了解的两种核心编程语言,拉尔森编著的这本<HTML5&CSS3编程入门经典>详细介绍了这两种语言. <HTML5&CSS3编程入门经典 ...

  7. 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些

    妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...

  8. 妙味css3课程---1-1、css中自定义属性可以用属性选择器么

    妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...

  9. 【CSS】CSS3从入门到深入（复习查漏向

    CSS3从入门到深入(复习查漏向 pre_section CSS:层叠样式表,决定网页表现 网页为多层结构,CSS为每一层设置样式,最后显示最上一层 CSS语句 = 选择器 + 声明块 形式 内联样式 ...

随机推荐

  1. [MySQL] xtrabakcup原理

    Xtrabackup InnoDB内部的Redo log, 也叫Transaction log file. 存储每一个InnoDB表纪录的修改日志. 当InnoDB启动时, InnoDB会检查数据文件 ...

  2. Python学习杂记_6_字典常用操作

    字典操作 字典是由一对花括号括起来的一组“键值对”,每个键值对就是字典的一个元素,元素在字典中是无序的,常见操作如下: info = { 'name':'xiaoming', 'sex':'nan', ...

  3. FZU 1056 扫雷游戏【搜索】

    Accept: 2584    Submit: 6790Time Limit: 1000 mSec    Memory Limit : 32768 KB Problem Description 扫雷是 ...

  4. HDU 1024 Max Sum Plus Plus [动态规划+m子段和的最大值]

    Max Sum Plus Plus Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tot ...

  5. Java I/O系统学习系列一：File和RandomAccessFile

    I/O系统即输入/输出系统,对于一门程序语言来说,创建一个好的输入/输出系统并非易事.因为不仅存在各种I/O源端和想要与之通信的接收端(文件.控制台.网络链接等),而且还需要支持多种不同方式的通信(顺 ...

  6. VS如何反汇编

    1. 打开反汇编窗口:调试模式下,按Ctrl+F11.2. 术语: 2.1 ESP(Extended Stack Pointer): 堆栈指针,寄存器存放当前线程的栈顶指针: i.e: move eb ...

  7. Java 实现多线程切换等待唤醒交替打印奇偶数

    引言 在日常工作生活中,可能会有用时几个人或是很多人干同一件事,在java编程中,同样也会出现类似的情况,多个线程干同样一个活儿,比如火车站买票系统不能多个人买一到的是同一张票,当某个窗口(线程)在卖 ...

  8. Java中的文件上传（原始Servlet实现）

    从原始的Servlet来实现文件的上传,代码如下: 参考:https://my.oschina.net/Barudisshu/blog/150026 采用的是Multipart/form-data的方 ...

  9. iOS 汉字转拼音 PinYin4Objc

    PinYin4Objc 是一个效率很高的汉字转拼音类库,支持简体和繁体中文.有以下特性:1.效率高,使用数据缓存,第一次初始化以后,拼音数据存入文件缓存和内存缓存,后面转换效率大大提高:2.支持自定义 ...

  10. Android常用URI收藏

    转:http://www.android-study.com/jichuzhishi/338.html 以下是常用到的Intent的URI及其示例,包含了大部分应用中用到的共用Intent 一.打开一 ...