CSS3提供了强大的伪类(pseudo-class)选择器,而 nth-child 就是其中的一个。只可惜ie对nth-child的支持(其实更应该是说是对css3的支持)还是那么的令人纠结。今天刚好接触了一下css3其中的一个伪类 nth-child, 下面就来讲下nth-child的作用。

语法:

:nth-child(an+b)

nth-child伪类在W3C里定义是选择选择父元素里的第n个子元素,可以使用an+b的形式选择子元素,举例用法如下:

1
2
3
4
tr:nth-child(2n+1) /* 选择表格里的单数行 */
tr:nth-child(odd)  /* 同上 */
tr:nth-child(2n)   /* 选择表格里的双数行 */
tr:nth-child(even) /* 同上*/
<ul> 
<li> 球一 </li>
<li> 球二 </li>
<li> 球三 </li> 
<li> 球四 </li> 
<li> 球五 </li> 
<li> 球六 </li>
<li> 球七 </li> 
</ul>
例如上面是分别是7个没有颜色的球, 如果我想给第5个球加上红色,那css的写法就是:
ul li:nth-child(5){color:red;}
这样在谷歌或火狐浏览器就可以看到,第五个球变成了红色了。
如果要要选择第一个元素,还可以使用:first-child。
那如果要除了之前的5个球以为的那些球是变成红色的话(6跟7),那css的写法如下:
li:nth-child(n+6){ color:red;}
css3 nth-child

css3 nth-child

这样第六跟第七球就会以红色显示了。
那只选择前面的前五个呢? css的写法: li:nth-child(-n+5){color:red;}
从开始的那个开始,选择第四个:
li:nth-child(4n+1){color:red;}
或者  li:nth-child(4n-7){color:red;}
选择基数或偶数
li:nth-child(odd){color:red;}
li:nth-child(even){color:red;}

nth-child伪类的衍生

除了nth-child以外,W3C还为我们提供了几个基于nth-child定义的衍生伪类,这里简单地说说他们的用途。

  • E:nth-last-child(n): 选择某个子元素,从最后一个数起
  • E:nth-of-type(n): 选择某个某种类型的子元素
  • E:nth-last-of-type(n): 选择某个某种类型的子元素,从最后一个符合条件的元素数起
  • E:first-child: 选择第一个子元素(这个伪类在CSS2里就有)
  • E:last-child: 选择最后一个子元素

nth-child伪类的家族里,除了E:first-child外,其他的伪类都只能在支持CSS3的浏览器里起作用,也就是说在目前的IE里是看不到效果的。

   
© 2012 Ai-WEB的博客 Suffusion theme by Sayontan Sinha