css3-伪类选择器使用

转载 2015年07月10日 13:47:16

web前端同学都需要清楚伪类选择器的使用。像:link,:visited,:hover,:active,:focus,:first-child,:lang大家已经很熟悉了,今天说说css3中新增的:nth-child()和:nth-of-type()。

:nth-child()用法

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。

在w3c中说明的 n 可以是数字、关键词或公式。常用的有4中写法。

1.具体的数字

:nth-child(n):匹配父元素中第n个元素,例:li:nth-child(3){background:green;}

2.倍数

:nth-child(an):匹配父元素中第a数倍的元素,例:li:nth-child(2n){background:red;}

3.倍数分组

:nth-child(an+b)或:nth-child(an-b):先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。如3n+1、5n-1。

4.奇偶写法

:nth-child(odd)和:nth-child(even):分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。

:nth-of-type()的用法

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.这个的用法和:nth-child(n)的用法类似,不同的是:nth-child(n)所匹配的元素必须有父元素包着。但:nth-of-type(n)可以匹配特定类型元素行。

浏览器支持

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

相关文章推荐

css3ui状态伪类选择器

  • 2016年08月22日 18:52
  • 1KB
  • 下载

css3伪类选择器使用总结

伪类选择器分为结构性、子元素、 UI、动态和其它伪类选择器 大部分伪类选择器如下图所示 :root返回 在下面的示例中: div > p:only-child{     color:re...
  • MOONCOM
  • MOONCOM
  • 2016年12月26日 19:44
  • 2526

css3中伪类选择器:target的使用

参考资料 CSS3 target伪类简介今天由于在做任务13,里面有一个子任务是要求用css写出一个简单的图片轮播,刚开始真的是完全没有思路,想着不用js怎么绑定点击事件呢,看了别人的一些实现方法,发...

CSS3学习笔记 之 动态伪类选择器

动态伪类选择器为伪类选择器的一种,其语法如下: E: pseudo-class {property:value} 其中E为HTML中的元素,pseudo-class是CSS的伪类选择器名称,pr...
  • atleks
  • atleks
  • 2014年08月31日 23:53
  • 1372

【CSS3】结构性伪类选择器—nth-child(n)

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even)...

CSS3选择器/伪类的那些事~

article h2:后代选择器:选择指定祖先元素内的后代元素article > h2:子元素选择器:选择指定父元素内的直接子元素h2~p 选择器是一个普通兄弟选择器,查询h2元素后面的拥有共同父元素...

CSS3 :nth-child()伪类选择器

CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器...
  • wstwlk
  • wstwlk
  • 2013年04月02日 08:58
  • 207

[持续更新]CSS3学习笔记(一)伪类选择器&自定义字体&背景图片

CSS3学习笔记 1.  伪类选择器 CSS3之前的伪类共有::hover,:active, :visited, :link, :first-child, :lang这六种。 CSS3新增了许多选择...

CSS3:nth-child()伪类选择器,Table表格奇偶数行定义样式

css table tr

CSS3目标伪类选择器--实现简单手风琴效果

总结自:图解CSS3中的实战体验 以前制作手风琴效果需要依赖js脚本,功能强大的CSS3的目标伪选择器可以直接实现同样的效果。 通过目标伪类选择器“E:target”,显示和隐藏不同栏目内...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3-伪类选择器使用
举报原因:
原因补充:

(最多只允许输入30个字)