仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 763|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来看看:CSS3伪类挑选器:nth-child()

[复制链接]
不帅 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:01:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
不管你用什么工具软件制作网页,都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼,同样内容的网页,有的人做出来有几十KB,而高手做出来只有十几KB。
破洛洛文章简介:CSS3尺度已提出数年,可是今朝能完成她的扫瞄器其实不多,固然部分扫瞄器能完成部分标准,但这又有甚么用呢?面临更多的兼容性成绩,明天我们就来“前瞻”一下CSS3的一个伪类选择器“nth-child()”。
CSS3的壮大,让人惊讶,人们在欣喜之余,又不能不为其困难的路途感应惋惜:好的尺度只要失掉行业扫瞄器的优秀撑持才算得上“尺度”。CSS3尺度已提出数年,可是今朝能完成她的扫瞄器其实不多,固然部分扫瞄器能完成部分标准,但这又有甚么用呢?面临更多的兼容性成绩,CSSer们只要看洋轻叹。固然云云,但有前瞻性的我们,又怎能留步不前呢?明天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”
语法:
  1. :nth-child(an+b)
复制代码
为何选择她,由于我以为,这个选择器是最多学问的一个了。很惋惜,据我所测,今朝能较好地撑持她的只要Opera9+和Safari3+。
形貌:
伪类:nth-child()的参数是an+b,假如依照w3.org上的形貌,写成中文,极可能会让人头晕,再加上笔者的文笔程度无限,以是我决意避开an+b的说法,把它拆分红5种写法共5部分来讲明。
第一种:复杂数字序号写法

:nth-child(number)
间接婚配第number个元素。参数number必需为年夜于0的整数。
例子:
  1. li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/
复制代码
第二种:倍数写法

:nth-child(an)
婚配一切倍数为a的元素。个中参数an中的字母n不成缺省,它是倍数写法的标记,如3n、5n。
例子:
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后面也能够是负号,但留给下一部分讲。)
例子:
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
再现理想 该用户已被删除
沙发
发表于 2015-1-17 23:52:36 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
飘灵儿 该用户已被删除
板凳
发表于 2015-1-25 23:07:14 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
再见西城 该用户已被删除
地板
发表于 2015-2-4 13:34:19 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
海妖 该用户已被删除
5#
发表于 2015-2-10 00:09:40 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
兰色精灵 该用户已被删除
6#
发表于 2015-2-28 11:50:53 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
admin 该用户已被删除
7#
发表于 2015-3-9 23:22:28 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
乐观 该用户已被删除
8#
发表于 2015-3-17 03:10:30 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
小女巫 该用户已被删除
9#
发表于 2015-3-23 18:15:17 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-4-30 04:13

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表