之前也用到过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()选择器小结的更多相关文章
-
CSS3选择器小结
CSS3 选择器小结 一 通用选择器 1 *{}通配选择符(CSS2):适合所有元素对象. 2 E类型(HTML)选择符(CSS1):以文档语言对象类型DOM作为选择符. 3 E#myid是id ...
-
CSS选择器小结
在CSS3中是提倡使用选择器来将样式与元素直接绑定在一起的. 网页开发过程中,我们需要定义很多class来应用到不同的元素上,由于class本身是没有语义而且是可以复用的,所以过度使用class会使得 ...
-
Jquery选择器小结
1.基本选择器 $("#id") //ID选择器 $("div") //元素选择器 $(".classname") //类选择器 $(&qu ...
-
CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...
-
CSS3选择器使用小结
CSS3 选择器小结 一 通用选择器 1 *{}通配选择符(CSS2):适合所有元素对象. 2 E类型(HTML)选择符(CSS1):以文档语言对象类型DOM作为选择符. 3 E#myid是id ...
-
simple_html_dom使用小结
simple_html_dom使用小结 分类: PHP2012-08-31 14:24 3094人阅读 评论(0) 收藏 举报 htmlcallbackstringdivfunctionfile 1 ...
-
CSS常见选择器
一.元素选择器 p,html,h1, h2 1.多个元素一起设置同一种风格, 则用逗号“,”隔开(选择器分组) 2.通配符选择, *{Color:red} 表示文档中所有元素都为红色 二.类选择器 ...
-
CSS的引入方式及CSS选择器
一 CSS介绍 现在的互联网前端分三层: a.HTML:超文本标记语言.从语义的角度描述页面结构. b.CSS:层叠样式表.从审美的角度负责页面样式. c.JS:JavaScript .从交互的角度描 ...
-
CSS选择器分类总结
一.选择器语法及其意义(pattern and meaning) Pattern Meaning CSS level E an element of type E 标记选择器,匹配所有标签名为E的元素 ...
随机推荐
-
manacher算法专题
一.模板 算法解析:http://www.felix021.com/blog/read.php?2040 *主要用来解决一个字符串中最长回文串的长度,在O(n)时间内,线性复杂度下,求出以每个字符串为 ...
-
oracle--知识点汇总2---laobai
--复制表 create table emp as(select * from scott.emp); select * from emp; --Demo1创建存储过程,实现将emp表comm为空时, ...
-
Android 进程常驻----native保活5.0以上方案推演过程以及代码
正文: 上一篇我们通过父子进程间建立双管道,来监听进程死掉,经过测试,无耗电问题,无内存消耗问题,可以在设置中force close下成功拉起,也可以在获取到root权限的360/cleanmaste ...
-
bzoj3955
首先,最短路不同的两辆车一定不会发生堵塞 对于最短路相同的点,我们把属于最短路径上的边拎出来建图跑最大流即可 然后我TLE了…… 因为很明显建出来图很大,而真正流的流量很小 普通的初始标号都是0的sa ...
-
实用的eclipse adt 快捷键
Ctrl + Shift + T: 打开类型:显示"打开类型"对话框来在编辑器中打开类型."打开类型"选择对话框显示工作空间中存在的所有类型如类.接口等. ...
-
Nova 无法向虚机注入密钥
欢迎各位关注我的博客:http://weibo.com/u/216633637 废话开头: 之前参考这位同学的博客http://www.cnblogs.com/awy-blog/p/3447176.h ...
-
AspectJ教学
这几天看JAVA基础看的有点头疼,决定时不时的换换口味,准备開始调研一些如今流行的技术,于是,開始埋头思考自己知识的盲区(当时,自己的知识盲区茫茫多...),想了几天后,决定要開始研究一下几种技术及实 ...
-
[推荐]ORACLE PL/SQL编程详解之三:PL/SQL流程控制语句(不给规则,不成方圆)
原文:[推荐]ORACLE PL/SQL编程详解之三:PL/SQL流程控制语句(不给规则,不成方圆) [推荐]ORACLE PL/SQL编程详解之三: PL/SQL流程控制语句(不给规则,不成方圆) ...
-
Round trip 流程图
更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢!
-
SpringAOP(5)
2019-03-08/14:22:58 演示:登陆核心业务类与日志周边功能实现AOP面向切面思想 jar包:https://share.weiyun.com/5GOFouP 学习资料:http://h ...