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中加入了表单选择器,利用这个选择器能极其方便的获取到表单的某个或者某类型的元素.表单选择器的介绍如图: ...
随机推荐
- 【Orleans开胃菜系列1】不要被表象迷惑
[Orleans开胃菜系列1]不要被表象迷惑 /** * prism.js Github theme based on GitHub's theme. * @author Sam Clarke */ ...
- 基于spring的redisTemplate的缓存工具类
pom.xml文件添加 <!-- config redis data and client jar --><dependency> <groupId>org.spr ...
- WebService技术,服务端and客户端JDK-wsimport工具(一)
使用webservice服务,需要了解几个名词:soap 简单对象协议.http+xml . WSDL 先看下代码结构: 服务端代码与客户端代码分别处于两不同的包中 一.服务端内容 服务端: @Web ...
- CM005-逆向分析过程(上篇)
前言 005,都说比较变态,很多人给放过去了,但是我还是决定上了它,既然变态就分两篇,上篇先实际说流程,到底应该怎么上它,下篇会告诉逆向分析的过程和方法 准备 [环境和工具] win7/xp虚拟机环境 ...
- Python+Selenium+Unittest+Ddt+HTMLReport分布式数据驱动自动化测试框架结构
1.Business:公共业务模块,如登录模块,可以把登录模块进行封装供调用 ------login_business.py from Page_Object.Common_Page.login_pa ...
- (功能篇)回顾Bug管理系统Mantis优化改造经历
共分为两篇,功能篇和技术篇. 时间大约是2016年冬天. 考虑搭一个用于Bug管理和追踪的系统. 综合比较下,选择了小巧的开源工具,Mantis. 在源码基础上,做代码修改,完成了定制版的优化改造. ...
- 关于UNITY学习,给新生建议
没有不可能,只有不努力. 本人自学UNITY,实力不敢称最好,但绝对不是小白,自己独立做出过游戏,AR.(用C#) 1. 导入模型一定要注意坐标,否则会很麻烦.本人因为这个吃了很多盐 2. 学unit ...
- unity2D限制位置的背景移动补偿效果
有时候我们想要背景可以跟随相机移动补偿,但是又不想该背景物体离原来的位置太远,比如我们想要一棵树在一个房子的后面,然后使用相机补偿使其跟随移动,达到3D错觉效果,但是我们又不想该物体偏离房屋太远.假设 ...
- 第三周 构造一个简单的Linux系统MenuOS
一. Linux内核源代码简介 稳定版内核:Linux-3.18.6 Linux内核源代码的目录结构: arch目录:在Linux内核源代码里占有的比重很大,因为Linux内核支持很多的体系结构, ...
- Hugepage介绍以及实践
在Linux 64位系统里面,默认内存是以4K的页面(Page)来管理的,当系统有非常多的内存的时候,管理这些内存的消耗就比较大;而HugePage使用2M大小的页面来减小管理开销. Hugepage ...