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. FileInputStream/FileOutputStream的应用

    这是一对继承于InputStream和OutputStream的类,用于本地文件读写(二进制格式读写并且是顺序读写,读和写要分别创建出不同的文件流对象): 本地文件读写编程的基本过程为: ①  生成文 ...

  2. AC日记——Oulipo poj 3461

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 37958   Accepted: 15282 Description The ...

  3. HDU 6225.Little Boxes-大数加法 (2017ACM/ICPC亚洲区沈阳站-重现赛（感谢东北大学）)

    整理代码... Little Boxes Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/O ...

  4. Codeforces 147B Smile House（DP预处理 + 倍增）

    题目链接  Smile House 题意  给定一个$n$个点的有向图,求一个点数最少的环,使得边权之和$>0$,这里的环可以重复经过点和边.   满足  $n <= 300$ 首先答案肯 ...

  5. 初学Docker容器网络不得不看的学习笔记

    一.关于Docker Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后 ...

  6. Algorithm | Sort

    Bubble sort Bubble sort, sometimes incorrectly referred to as sinking sort, is a simple sorting algo ...

  7. 洛谷 P3359 改造异或树

    题目描述 给定一棵n 个点的树,每条边上都有一个权值.现在按顺序删掉所有的n-1条边,每删掉一条边询问当前有多少条路径满足路径上所有边权值异或和为0. 输入输出格式 输入格式: 第一行一个整数n. 接 ...

  8. PHP如何在页面中原样输出HTML代码

    字符串与HTML之间的相互转换主要应用htmlentities()函数来完成. header("Content-Type: text/html; charset=utf-8"); ...

  9. 聊聊、Zookeeper Linux 单服务

    关于上一篇 Zookeeper 的文章是介绍安装启动,这一篇介绍独立服务,也就是单台 Zookeeper 提供服务.首先登陆 Linux 系统,确保网络通畅.如果遇到找不到网卡 eth0 情况,可以先 ...

  10. hdu4493(C++)

    //卡格式的题目 #include<iostream> #include<iomanip>using namespace std;int main(){ int T,i; do ...