1-2:CSS3课程入门之结构选择
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-3:CSS3课程入门之伪类和伪元素
E:target 表示当前的URL片段的元素类型,这个元素必须是E E:disabled 表示不可点击的表单控件 E:enabled 表示可点击的表单控件 E:checked 表示已选中的checkb ...
- 1-1:CSS3课程入门之属性选择器
div[name=jewave] 选取属性名为name且属性值是"jewave"的元素 div[name^=jewave]选取属性名为name且属性值以"jewave&q ...
- CSS3基础入门01
CSS3 基础入门 01 前言 相对于css2来说,css3更新了很多的内容,其中包括选择器.颜色.阴影.背景.文本.边框.新的布局方案.2d.3d.动画等等. 而如果想要学习css3的诸多部分,不妨 ...
- HTML5+CSS3从入门到精通随书光盘 ISO 镜像视频教程
HTML5+CSS3从入门到精通(清华社“视频大讲堂”大系)通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于权威指南.高级程序设计.开发指南同类图书 ...
- HTML5+CSS3从入门到精通 中文pdf版
HTML5+CSS3从入门到精通是通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指南.高级程序设计.开发指南同类图书,本书是一本适合快速入手的 ...
- HTML5 & CSS3编程入门经典 ((美)Rob Larsen) pdf扫描版
HTML和CSS是构建网页所需要了解的两种核心编程语言,拉尔森编著的这本<HTML5&CSS3编程入门经典>详细介绍了这两种语言. <HTML5&CSS3编程入门经典 ...
- 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些
妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...
- 妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
- 【CSS】CSS3从入门到深入（复习查漏向
CSS3从入门到深入(复习查漏向 pre_section CSS:层叠样式表,决定网页表现 网页为多层结构,CSS为每一层设置样式,最后显示最上一层 CSS语句 = 选择器 + 声明块 形式 内联样式 ...
随机推荐
- 时间戳/Date(1354116249000)/ 转换
从C#的Datatime格式通过Json传到Js里面,时间会显示成时间戳/Date(1354116249000)/ ,js转化如下 function GetDateFormat(str) { retu ...
- Selenium2+python自动化（学习笔记2）
from selenium import webdriverdriver = webdriver.Ie()driver.get=("http://www.baidu.com")dr ...
- AC日记——计算循环节长度 51nod 1035
最长的循环节 思路: 我们尝试一种最简单的方法,模拟: 如何模拟呢? 每个数,对它模k取余,如果它的余数没有出现过,就补0继续模: 所以,当一个余数出现两次时,当前的长度即为循环节长度: 来,上代码: ...
- HDU——最大连续子序列（区间DP）
上一个题的加强版! 最大连续子序列 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- 最短Hamilton路径
题目描述 给定一张 n(n≤20) 个点的带权无向图,点从 0~n-1 标号,求起点 0 到终点 n-1 的最短Hamilton路径. Hamilton路径的定义是从 0 到 n-1 不重不漏地经过每 ...
- [TJOI2014] 上升子序列
刚刚做的时候一看:这不是个傻逼题吗hhhhh....然后发现写完了过不了样例,仔细一看题:同构的算一种. 这可咋办啊? 其实很简单,设f[i] 为 以a[i] 结尾的上升子序列个数,我们考虑当前如果算 ...
- Mac git 的使用
1. mac 安装git brew install git 2.初使化 git config --global user.name "mygit" git config --glo ...
- 最新Webstrom, Idea 2019.1.3 的激活
1.注册码激活 打开网址(IntelliJ IDEA 注册码),我们能看到下面的界面,直接点击获取激活码,将生成的激活码粘贴到WebStorm激活对话框中的Lisence Code输入框,点击OK即可 ...
- Android requestLayout 和 invalidata , postInvalidate 比较
Android 中的View更新方法 invalidate 在UI线程中使用. postInvalidate 在非UI线程中通知重绘. View 确定自身已经不适合现有区域时,调用requestLay ...
- 在网页中插入flash播放器，播放flv视频
效果图如下: 所用代码如下: <object id="FLVPlayer" height="480" width="640" code ...