CSS3伪类选择器:nth-child()
简单的归纳下nth-child()的几种用法。
第一:nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。
第二:nth-child(an) 匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。
(EG) li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/
第三:nth-child(an+b) 与 :nth-child(an-b) 先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号,此时匹配组内的第a-b个。(其实an前面也可以是负号,但留给下一部分讲。)
(EG)li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/
li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/
li:nth-child(3n±0){background:orange;}/*相当于(3n)*/
li:nth-child(±0n+3){background:orange;}/*相当于(3)*/
第四:nth-child(-an+b) 此处一负一正,均不可缺省,否则无意义。这时与:nth-child(an+1)相似,都是匹配第1个,但不同的是它是倒着算的,从第b个开始往回算,所以它所匹配的最多也不会超过b个。
(EG) li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/
li:nth-child(-1n+8){background:orange;}/*或(-n+8),匹配前8个(包括第8个)LI,这个较为实用点,用来限定前面N个匹配常会用到*/
第五:nth-child(odd) 与 :nth-child(even) 分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。
jQuery中用此方法可以实现条纹效果:
$("table tr:nth-child(even)").addClass("striped");
initial-scale表示初始时的缩放比例,minimum-scale和maximum-scale分别表示最小和最大缩放比例。
布局宽度320像素,初始缩放为1倍(即不缩放),且禁止用户缩放(因为最大最小缩放都为1倍)——一个专为iPhone优化的网页通常就会用这样的设置。
分享到:
相关推荐
CSS学习笔记CSS学习笔记CSS学习笔记CSS学习笔记
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
css笔记
css3笔记知识点总结
CSS和CSS3学习笔记,知识全面,知识分类清晰,内涵学习3D的链接博客
看黑马视频里面的前端css3笔记,里面主要是讲课老师在课堂上手写的笔记,非常详细,供大家学习,一起交流学习
html5+css3笔记资料
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...
尚硅谷(李立超)——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用,小编自己整理的李立超老师视频的笔记,手打不易,那就望您每年快乐吧。逃) 一、进制 1.十进制(日常使用): 特点:满10进1 计数:0 1 ...
css大全,自己总结的css笔记,希望各位能喜欢!!
学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习...
个人css学习笔记 精华版 个人css学习笔记 精华版
html和css笔记 基础内容 自己做的比较
css的笔记
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
用了几天时间研究总结了HTML/CSS3,通过分析归纳,总结了CSS3一些特点规律,掌握了这些,样式表基本就差不多 了。
Web前端学习笔记:HTML5+CSS3+JavaScript.pdf
CSS第3天笔记CSS第3天笔记CSS第3天笔记CSS第3天笔记CSS第3天笔记CSS第3天笔记
Html\CSS+DIV学习笔记(史上最实用的CSS笔记).