css3 :nth-child()选择器的使用
一、nth-child()
1. nth-child(n):父元素下的第n个子元素,n>0,索引从1开始。不区分子元素类型。
2. nth-child(odd):父元素下的奇数子元素,等同于:nth-child(2n-1)。区分子元素类型。
3. ntn-child(even):父元素下的偶数子元素,等同于:nth-child(2n)。区分子元素类型。
4. nth-child(an+b):父元素的an+b个子元素,区分子元素类型。
5. first-child:父元素下的第一个子元素,如果第一个子元素不是该类型,选择不到。等同于:nth-child(1)。
6. last-child:父元素下的最后一个子元素,如果最后一个子元素不是该类型,选择不到。
二、nth-of-type()
匹配属于父元素的特定类型的第n个子元素,忽略不是该类型的元素。
css3 :nth-child()选择器的使用的更多相关文章
- CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...
- 极客技术专题【008期】:CSS3核心技术:选择器
日期:2013-8-19 来源:GBin1.com 技术专题介绍 技术专题:CSS3核心技术:选择器 专题演讲稿:CSS3选择器 分享人:知名前端技术博客 - w3cplus.com 博主 - 大漠 ...
- jQ not()选择器 与 css3 :not( selector )选择器
1.jQ not() 2.css3 not w3c在线演示地址 http://www.w3school.com.cn/tiy/t.asp?f=css_sel_not 总结: 注意两者还是有区别的 ...
- css3的nth-child选择器的具体探讨
css3的nth-child选择器的具体探讨 前言 在十年前開始的div+css布局兴起之时,我就開始了CSS的学习和实践.在当年,对于CSS选择器,基本上是没有什么选择性的,仅仅有ID选择器,CLA ...
- CSS3 伪类选择器 nth-child() 的用法
伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等, ...
- CSS3的属性选择器
CSS3中新增了许多选择器,今天零度给大家说说CSS3的属性选择器. 与CSS2相比,CSS3新增了3种属性选择器:[attr^=value].[attr$=value].[attr*=value]: ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器1
要使用CSS对HTML页面中的元素实现一对一.一对多或者多对一的控制,就需要用到CSS选择器.选择器是CSS3中一个重要的内容,使用它可以大幅度地提高开发人员书写或修改样式表的效率.在大型网站中,样式 ...
- CSS3的nth-child() 选择器
CSS3的nth-child() 选择器,表格奇偶行变色 nth-child() 应用背景 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个 ...
- CSS3 nth-of-type(n)选择器 last-of-type选择器 nth-last-of-type(n)选择器 CSS3 only-child选择器 only-of-type选择器
CSS3 nth-of-type(n)选择器 “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素.当某个元素中的子元 ...
- JQ表单选择器和CSS3表单选择器
JQ表单选择器和CSS3表单选择器 JQ表单选择器 为了使用户能够更加灵活地操作表单,jQuery中加入了表单选择器,利用这个选择器能极其方便的获取到表单的某个或者某类型的元素.表单选择器的介绍如图: ...
随机推荐
- laraver框架学习------工厂模型填充测试数据
在laravel中填充数据有几种方式.一种是Seeder,另一种是工厂模式进行的填充. 工厂模式可以实现大批量的填充数据,数据的量可以自定义.这也为后续的软件测试提供方便. 在laravel框架有da ...
- Scrapy持久化存储
基于终端指令的持久化存储 保证爬虫文件的parse方法中有可迭代类型对象(通常为列表or字典)的返回,该返回值可以通过终端指令的形式写入指定格式的文件中进行持久化操作; 执行输出指定格式进行存储:将爬 ...
- c++时间计算模块
c++时间计算模块 可用于计算代码运行耗时.计算代码运行时间线(比如处理与运行时间相关函数). 该模块从实际项目中产生,使用方式仁者见仁智者见智,设计思想可供参考. 源码: //author: cai ...
- 【URLOS应用开发基础】10分钟制作一个nginx静态网站环境应用
URLOS开发者功能已上线有一段时间了,目前通过部分开发者的使用体验来看,不得不说URLOS在服务器软件开发效率方面确实有着得天独厚的优势,凭借docker容器技术与其良好的应用生态环境,URLOS必 ...
- 《Linux内核》课本读书笔记 第一章、第二章
- 冲刺Two之站立会议6
今天继续了昨天的工作,对视频进行优化.因为昨天的工作没有达到预期的效果,所以又继续对音质和画面质量做了相应的优化.还对相应的聊天室界面进行了优化.
- VS2013安装及测试
一.Visual Studio的安装 首先是Visual Studio英文版的安装,安装完成后,为了用的时候方便,我从官网下载Visual Studio 2013的语言包并安装. 二.进行单元测试. ...
- 从零开始学Kotlin-类的继承(6)
从零开始学Kotlin基础篇系列文章 Kotlin中的超类Any Kotlin 中所有类都继承超类 Any 类 class demo6 //默认继承超类Any class demo6 : Any() ...
- 从零开始学Kotlin-数据类型(2)
从零开始学Kotlin基础篇系列文章 基本数据类型 Kotlin 的基本数值类型包括 Byte.Short.Int.Long.Float.Double 等: 数据-------位宽度 Double-- ...
- HDU 2051 Bitset
http://acm.hdu.edu.cn/showproblem.php?pid=2051 Problem Description Give you a number on base ten,you ...