nth-child()选择器小结

时间:2022-09-01 23:55:40

  之前也用到过nth-child,只是当时理解的不够透彻。今天回过头去看这个知识点时,发现了一个易错点。

  浏览器支持情况:

  nth-child()选择器小结

  所有主流浏览器都支持nth-child()选择器,除了IE8及更早的版本。

  下面还是简单说一下它的用法吧:

  nth-child(n):该选择器匹配属于父元素的第n个子元素,不论元素的类型。其中n可以是数字、关键词或公式。

  关于数字就不多说了。下面先说说关键词:如nth-child(odd)或nth-child(even)。

  odd或even可用于匹配下标是奇数或偶数的子元素的关键词(注意:第一个子元素下标是1)

  

  关于公式的用法:nth-child(an+b)。a表示周期的长度,b表示偏移值(从0开始)。如nth-child(3n+1)表示每3个为一个周期,选择每个周期里的第2个元素。

  重点来了:

  如h2:nth-child(odd),首先nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素的时候,是连同父元素的所有子元素一起计算的。

  换句话说:h2:nth-child(odd),其含义并不是选择第奇数个h2来使用,而是指当第奇数个元素是h2则选中。

  

nth-child()选择器小结的更多相关文章

  1. CSS3选择器小结

    CSS3 选择器小结 一 通用选择器 1  *{}通配选择符(CSS2):适合所有元素对象. 2  E类型(HTML)选择符(CSS1):以文档语言对象类型DOM作为选择符. 3  E#myid是id ...

  2. CSS选择器小结

    在CSS3中是提倡使用选择器来将样式与元素直接绑定在一起的. 网页开发过程中,我们需要定义很多class来应用到不同的元素上,由于class本身是没有语义而且是可以复用的,所以过度使用class会使得 ...

  3. Jquery选择器小结

    1.基本选择器 $("#id") //ID选择器 $("div") //元素选择器 $(".classname") //类选择器 $(&qu ...

  4. CSS3 nth 伪类选择器

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

  5. CSS3选择器使用小结

    CSS3 选择器小结 一 通用选择器 1  *{}通配选择符(CSS2):适合所有元素对象. 2  E类型(HTML)选择符(CSS1):以文档语言对象类型DOM作为选择符. 3  E#myid是id ...

  6. simple&lowbar;html&lowbar;dom使用小结

    simple_html_dom使用小结 分类: PHP2012-08-31 14:24 3094人阅读 评论(0) 收藏 举报 htmlcallbackstringdivfunctionfile  1 ...

  7. CSS常见选择器

    一.元素选择器 p,html,h1, h2 1.多个元素一起设置同一种风格, 则用逗号“,”隔开(选择器分组) 2.通配符选择,  *{Color:red}  表示文档中所有元素都为红色 二.类选择器 ...

  8. CSS的引入方式及CSS选择器

    一 CSS介绍 现在的互联网前端分三层: a.HTML:超文本标记语言.从语义的角度描述页面结构. b.CSS:层叠样式表.从审美的角度负责页面样式. c.JS:JavaScript .从交互的角度描 ...

  9. CSS选择器分类总结

    一.选择器语法及其意义(pattern and meaning) Pattern Meaning CSS level E an element of type E 标记选择器,匹配所有标签名为E的元素 ...

随机推荐

  1. manacher算法专题

    一.模板 算法解析:http://www.felix021.com/blog/read.php?2040 *主要用来解决一个字符串中最长回文串的长度,在O(n)时间内,线性复杂度下,求出以每个字符串为 ...

  2. oracle--知识点汇总2---laobai

    --复制表 create table emp as(select * from scott.emp); select * from emp; --Demo1创建存储过程,实现将emp表comm为空时, ...

  3. Android 进程常驻----native保活5&period;0以上方案推演过程以及代码

    正文: 上一篇我们通过父子进程间建立双管道,来监听进程死掉,经过测试,无耗电问题,无内存消耗问题,可以在设置中force close下成功拉起,也可以在获取到root权限的360/cleanmaste ...

  4. bzoj3955

    首先,最短路不同的两辆车一定不会发生堵塞 对于最短路相同的点,我们把属于最短路径上的边拎出来建图跑最大流即可 然后我TLE了…… 因为很明显建出来图很大,而真正流的流量很小 普通的初始标号都是0的sa ...

  5. 实用的eclipse adt 快捷键

    Ctrl + Shift + T: 打开类型:显示"打开类型"对话框来在编辑器中打开类型."打开类型"选择对话框显示工作空间中存在的所有类型如类.接口等.    ...

  6. Nova 无法向虚机注入密钥

    欢迎各位关注我的博客:http://weibo.com/u/216633637 废话开头: 之前参考这位同学的博客http://www.cnblogs.com/awy-blog/p/3447176.h ...

  7. AspectJ教学

    这几天看JAVA基础看的有点头疼,决定时不时的换换口味,准备開始调研一些如今流行的技术,于是,開始埋头思考自己知识的盲区(当时,自己的知识盲区茫茫多...),想了几天后,决定要開始研究一下几种技术及实 ...

  8. &lbrack;推荐&rsqb;ORACLE PL&sol;SQL编程详解之三:PL&sol;SQL流程控制语句&lpar;不给规则,不成方圆&rpar;

    原文:[推荐]ORACLE PL/SQL编程详解之三:PL/SQL流程控制语句(不给规则,不成方圆) [推荐]ORACLE PL/SQL编程详解之三: PL/SQL流程控制语句(不给规则,不成方圆) ...

  9. Round trip 流程图

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢!

  10. SpringAOP&lpar;5&rpar;

    2019-03-08/14:22:58 演示:登陆核心业务类与日志周边功能实现AOP面向切面思想 jar包:https://share.weiyun.com/5GOFouP 学习资料:http://h ...