一、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个子元素,忽略不是该类型的元素。

参考:css选择器 nth-child

css3 :nth-child()选择器的使用的更多相关文章

  1. CSS3 nth 伪类选择器

    考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...

  2. 极客技术专题【008期】:CSS3核心技术:选择器

    日期:2013-8-19  来源:GBin1.com 技术专题介绍 技术专题:CSS3核心技术:选择器 专题演讲稿:CSS3选择器 分享人:知名前端技术博客 - w3cplus.com 博主 - 大漠 ...

  3. jQ not()选择器 与 css3 :not( selector )选择器

    1.jQ  not() 2.css3 not  w3c在线演示地址  http://www.w3school.com.cn/tiy/t.asp?f=css_sel_not 总结: 注意两者还是有区别的 ...

  4. css3的nth-child选择器的具体探讨

    css3的nth-child选择器的具体探讨 前言 在十年前開始的div+css布局兴起之时,我就開始了CSS的学习和实践.在当年,对于CSS选择器,基本上是没有什么选择性的,仅仅有ID选择器,CLA ...

  5. CSS3 伪类选择器 nth-child() 的用法

    伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等, ...

  6. CSS3的属性选择器

    CSS3中新增了许多选择器,今天零度给大家说说CSS3的属性选择器. 与CSS2相比,CSS3新增了3种属性选择器:[attr^=value].[attr$=value].[attr*=value]: ...

  7. IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器1

    要使用CSS对HTML页面中的元素实现一对一.一对多或者多对一的控制,就需要用到CSS选择器.选择器是CSS3中一个重要的内容,使用它可以大幅度地提高开发人员书写或修改样式表的效率.在大型网站中,样式 ...

  8. CSS3的nth-child() 选择器

    CSS3的nth-child() 选择器,表格奇偶行变色 nth-child() 应用背景 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个 ...

  9. 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)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素.当某个元素中的子元 ...

  10. JQ表单选择器和CSS3表单选择器

    JQ表单选择器和CSS3表单选择器 JQ表单选择器 为了使用户能够更加灵活地操作表单,jQuery中加入了表单选择器,利用这个选择器能极其方便的获取到表单的某个或者某类型的元素.表单选择器的介绍如图: ...

随机推荐

  1. 设计模式 笔记 代理模式 Proxy

    //---------------------------15/04/21---------------------------- //Proxy 代理模式-----对象结构型模式 /* 1:意图: ...

  2. TensorFlow训练MNIST数据集(3) —— 卷积神经网络

    前面两篇随笔实现的单层神经网络 和多层神经网络, 在MNIST测试集上的正确率分别约为90%和96%.在换用多层神经网络后,正确率已有很大的提升.这次将采用卷积神经网络继续进行测试. 1.模型基本结构 ...

  3. 调试OV2735总结

    调试找到的问题: 1:开始调试的时候因为之前的工程师原理图和BOM出错,导致本来是2.8V电压的焊接的是1.8V的LDO所以这个是第一个问题 2:因为FAE反应说sensor没有反应I2C没有通信,所 ...

  4. 使用unity3d和tensorflow实现基于姿态估计的体感游戏

    使用unity3d和tensorflow实现基于姿态估计的体感游戏 前言 之前做姿态识别,梦想着以后可以自己做出一款体感游戏,然而后来才发现too young.但是梦想还是要有的,万一实现了呢.趁着p ...

  5. Celery基本使用

    Celery 什么是Celery? Celery是一种简单/高效/灵活的即插即用的分布式任务队列. Celery应用场景? 需要异步处理的任务,发邮件/发短信/上传等耗时的操作.最终到达提升用户体验的 ...

  6. Apache服务器出现Forbidden 403错误提示的解决方法总结

    在配置Linux的 Apache服务时,经常会遇到http403错误,我今天配置测试时也出现了,最后解决了,总结了一下.http 403错误是拒绝访问的意思,有很多原因的.还有,这些问题在win平台的 ...

  7. pycharm 调试 scrapy

    http://blog.csdn.net/shijichao2/article/details/61940931

  8. 【MOOC EXP】Linux内核分析实验二报告

    程涵  原创博客 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000  [操作系统是如何工作的]   教学内 ...

  9. 《Linux内核设计与实现》Chapter 1 读书笔记

    <Linux内核设计与实现>Chapter 1 读书笔记 一.Unix的特点 Unix从Multics中产生,是一个强大.健壮和稳定的操作系统. 特点 1.很简洁 2.在Unix系统中,所 ...

  10. 第一次冲刺阶段后五天总结和第一次 Sprint

    第一次冲刺阶段后五天总结(11.16-11.20) 一.准备实现的功能 1 在游戏中随机显示式子 点击进入答题则进入答题界面,显示式子 2 设置限时或者规定答题数目模式 进入游戏,选择不同模式 3 产 ...