css3-伪类选择器使用
2015-07-10 13:47
639 查看
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 及更早的版本。
: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 及更早的版本。
相关文章推荐
- 使用transform和transition制作CSS3动画
- ListView自定义样式
- CSS选择器总结
- 根据浏览器导入不同css文件
- 【CSS】CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框
- selector和shape结合设置控件样式
- 浏览器兼容css设置
- CSS3 小技巧/注意事项
- 15个实用的CSS在线实例教程
- IE无法引入css文件
- 学习CSS(2)
- 2015.7.9 第四课 课程重点 (css :浮动、盒子模型、绝对/相对定位)
- CSS3学习内容与心得
- css3 变形记
- css 实现6宫格图标
- css3--背景图片适应不同分辨率手机
- css在用空元素、无内容的元素布局不兼容ie7/8
- CSS3中的calc()
- css 水平居中 垂直居中方法
- css3质感分析(5)径向渐变叠加纹理(圆心可变)