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