css3 选择器（二）
八、结构性伪类选择器【:nth-child(n)】
:nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素，和jquery中一样。
其中"n"是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式（2n+1,-n+5）和关键字(odd【奇数】、even【偶数】)，但是参数n的值起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
Note:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。如下表所示：
所以要达到斑马线的效果就非常容易了。
偶数行变橙色，ol >li:nth-child(2n|even){background:orange}；
奇数行变绿色，ol > li:nth-child(2n+1|2n-1|odd){background: green;}
九、 结构性伪类选择器【:nth-last-child(n)】
：nth-last-child(n)和:nth-child(n)相似，但是多了个last，这个last代表从后向前，其他地方没差别。
举例：设置列表中倒数第五个列表项背景色为橙色。
<style type="text/css">
ol > li:nth-last-child(5){
background: orange;
}
</style>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
</ol>
十、【:first-of-type】选择器
:first-of-type选择器类似于:first-child选择器，不同之处是指定了元素的类型，主要用于定位一个父元素下的某个类型的第一个子元素。
个人觉得这个:first-of-child是对:first-child的细分，锦上添花。
举个例子：给div容器中第一个p元素设置样式。
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
/*p元素的父元素的第一个子元素是div而不是p元素，因此该样式不起作用*/
p:first-child {
color: red;
}
/*此时不用first-of-type,更待何时*/
p:first-of-type {
color: blue;
}
</style>
</head> <body>
<div class="wrapper">
<div>第一个子元素是div元素</div>
<div>第二个div元素</div>
<p>第一个p元素</p>
<p>第二个p元素</p>
</div>
</body> </html>
对于这个:first-of-type我真的觉得这名字很不贴切，没个明显的child来表示类型中第一个子元素，还不如叫:first-type-child更合适的，就像上面说的:nth-last-child(n)是对nth-child(n)的扩展一样。
十一、【:last-of-type】选择器
:last-of-type选择器和:first-of-type功能是一样的，不同的是它匹配的是父元素下的某个类型的最后一个子元素。
举例：将容器“div.wrapper”中最后一个Div元素背景设置为橙色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
.wrapper > div:last-of-type{
background: orange;
}
</style>
</head>
<body>
<div class="wrapper">
<div>我是第一个Div元素</div>
<div>我是第二个Div元素</div>
<div>我是第三个Div元素</div>
<p>我是第一个段落</p>
<p>我是第二个段落</p>
<p>我是第三个段落</p>
</div>
</body>
</html>
十二、【:nth-of-type(n)】 选择器
又 一个of-type，看到这里应该就明白了，这个:nth-of-type(n)是对:nth-child(n)选择器的扩展，只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不是同一种类型的子元素时，使用:nth-of-type(n)选择器来匹配父元素中特定类型的子元素就很方便了。
举例：设置偶数个段落背景色为橙色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
.wrapper>p:nth-of-type(even){
background-color:orange;
}
</style>
</head>
<body>
<div class="wrapper">
<div>我是一个Div元素</div>
<p>我是一个段落元素</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
</div>
</body>
</html>
十三、【:nth-last-of-type(n)】选择器
:nth-last-of-type(n)和:nth-of-type(n)选择器一样是选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，使用方法同：nth-last-child(n)一样。
举例：将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
.wrapper > p:nth-last-of-type(3){
background: orange;
}
</style>
</head>
<body>
<div class="wrapper">
<p>我是第一个段落</p>
<p>我是第二个段落</p>
<p>我是第三个段落</p>
<p>我是第四个段落</p>
<p>我是第五个段落</p>
<div>我是一个Div元素</div>
<p>我是第六个段落</p>
<p>我是第七个段落</p>
</div>
</body>
</html>
十四、【:only-child】选择器
:only-child，一看就是选择一个元素，且该元素是其父元素唯一的子元素。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
.post p {
background: green;
color: #fff;
padding: 10px;
}
.post p:only-child {
background: orange;
}
</style>
</head>
<body>
<div class="post">
<p>我是一个段落</p>
<p>我是一个段落</p>
</div>
<div class="post">
<p>我是一个段落</p>
</div>
</body>
</html>
十五、【:only-of-type】选择器
:only-of-type选择器是对:only-child的扩展，选择某种类型的子元素，且该子元素是其父元素中唯一一个该类型 的选择器。
举例：修改容器中仅有一个div元素的背景色为橙色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
.wrapper > div:only-of-type {
background: orange;
}
</style>
</head>
<body>
<div class="wrapper">
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
</div>
</body>
</html>
本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4574196.html有问题欢迎与我讨论，共同进步。
css3 选择器（二）的更多相关文章
- css3选择器二
在HTML中,通过各种各样的属性可以给元素增加很多附加的信息,了解和掌握css3一些的选择器,是很有必要的. :enabled 和 :disabled选择器表单元素有可用(“:enabled”)和不可 ...
- CSS3选择器(二)--表单
:enabled 选择可用状态的表单元素 :disabled 选择不可用状态的表单元素 :checked 复选框.单选框选中状态的选项 ::selection 用来匹配突出显示的文本(用鼠标选择文本时 ...
- CSS3知识点整理（二）----CSS3选择器
总结各种CSS3选择器的介绍及具体语法 (一)属性选择器 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这 ...
- css3的那些高级选择器二
在上个星期我介绍了css3的属性选择器,伪类选择器和结构伪类选择器,今天楼主继续把其它的css3选择器说完. 在css3中,共有11中UI状态伪类选择器,分别是E:hover,E:active,E:f ...
- CSS3选择器（二）之属性选择器
CSS3选择器的第二部分——属性选择器.. 属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式 使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同 ...
- CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
- css3 选择器（三）
接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...
- CSS3 选择器——基本选择器
CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...
- css3选择器（一）
直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...
随机推荐
- 推荐25款实用的 HTML5 前端框架和开发工具【下篇】
快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5.HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站,带给用户桌面应用程序的速度,性能和体验. ...
- 20款免费的 PSD 网站模板【免费下载】
如果你的新项目预算很低,那么免费网站模板对你来说是一个很好的解决方案.有很多的预先设计的网站模板 PSD 素材可以使用和自由定制.在这里,你会发现可供下载的超级棒的免费网站模板.你可以使用它们来创建自 ...
- transform:rotate在手机上显示有锯齿的解决方案大全
先来个兼容性说明,洗洗脑: div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate ...
- atom编辑markdown之上传图片
01atom编辑markdown之上传图片 :first-child { margin-top: 0px; } .markdown-preview:not([data-use-github-style ...
- PyInstaller 安装方法 及简单的编译exe (python3)
安装PyInstaller //地址 https://github.com/pyinstaller/pyinstaller/tree/python3 //上面的链接已经失效,新的(20160809更) ...
- easyui日期在未加载easyui-lang-zh_CN.js出现英文的情况下加载中文的方法
我们有时候在操作easyui的时候本来是加载了easyui-lang-zh_CN.js中文文件包,但是还是出现了英文.使得我们不得埋怨这框架咋这么不好用,其实我们仔细看看这个中文包就会发现里面很多都是 ...
- 简单代码在ABAP中实现声音的播放
这段代码的功能是在SAP里面实现声音的播放,可以用作程序提醒功能,和SAP里面’噹噹噹’那个声音的意思差不多.将来在项目中遇到客户想要SAP ABAP发出一点声音的时候就可以参考一下这个程序. REP ...
- GRID方式ALV导出数据到本地丢掉最后一位的问题
这是SAP的一个Bug,FM方式ALV Grid和Class ALV Grid都会出现,但是ALV List好像没有这个BUG. 在以下几个条件满足的时候就会出现这个问题: 1.字段对应的域Con ...
- 数据连接到 Web 服务 InfoPath 2010 窗体中的 SharePoint 服务器上运行时的错误消息："401-未经授权"解决方案
症状: 请考虑以下情形: Web 窗体发布到 SharePoint 服务器. 您创建 Microsoft InfoPath 2010 表单所在的 SharePoint 服务器上使用到位于数据的数据连接 ...
- RxJava 和 RxAndroid 五（线程调度）
对rxJava不了解的同学可以先看 RxJava 和 RxAndroid 一 (基础)RxJava 和 RxAndroid 二(操作符的使用)RxJava 和 RxAndroid 三(生命周期控制和内 ...