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语句 = 选择器 + 声明块 形式 内联样式 ...
随机推荐
- css create 多边形 polygon
案例: 代码: element.style { width: 0; height: 0; /* border-left: 50px solid transparent; */ border-rig ...
- MEF 注入[转载]
领域服务的时候,用到MEF的注入有参构造函数的方法,your master was attracted,打算稍微深挖一下,这篇来对此知识点做个总结. 一.知识点回顾 MEF作为IOC的方式之一,它的主 ...
- android中提示&对话框----ProgressDialog&DatePickerDialog &TimePickerDialog&PopupWindow
ProgressDialog(精度条对话框): 1.直接调用ProgressDialog提供的静态方法show()显示 2.创建ProgressDialog,再设置对话框的参数,最后show()出来 ...
- 無法使用 system/bin/r 讀取 pmic pm8937 hardware regitster 的原因
Platform Qualcomm MSM8917 + PM8937 + PMI8940 起因 同事問我 PM8937 的 VREG_L17 如何設定成 3.3V, 從 PM8937 hardware ...
- 学习总结——JMeter做http接口压力测试
JMeter做http接口压力测试 测前准备 用JMeter做接口的压测非常方便,在压测之前我们需要考虑这几个方面: 场景设定 场景分单场景和混合场景.针对一个接口做压力测试就是单场景,针对一个流程做 ...
- C# 加载图片image --（C#）Image.FromFile 方法会锁住文件的原因及可能的解决方法
Image.FromFile 一旦使用后,对应的文件在一直调用其生成的Image对象被Disponse前都不会被解除锁定,这就造成了一个问题,就是在这个图形被解锁前无法对图像进行操作(比如删除,修改等 ...
- JSON Web Token的使用
定义 JSON Web Token(JWT)是一个非常轻巧的规范.这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息. 适用场景 1.用于向Web应用传递一些非敏感信息.例如完成加好友.下 ...
- window postgresql 10.4安装
window installer下载地址:https://www.enterprisedb.com/downloads/postgres-postgresql-downloads 其他版本官网下载地址 ...
- Linux中查看某个软件的安装路径
Linux中查看某个软件的安装路径(地址)有时显得非常重要.比如某个文件的快速启动项被删除,或者你要建立快速启动项,或者想删除.添加安装文件等等,很多地方都要用到查案文件安装路径的命令. 这里给大家介 ...
- asp.net站点从2003服务器迁移到2008服务器出现定义了重复的“system.web.extensions/scripting/scriptResourceHandler”节的问题解决
解决方法: 1.从4.0降到2.0. 2.直接删除整个节点,如下: