nth-* Firefox 3.5中全新的CSS属性

王朝学院·作者佚名  2009-06-27
窄屏简体版  字體: |||超大  

Firefox 3.5支持一些全新的CSS3选取器。在这篇文章中,我们会介绍其中的四个::nth-child,:nth-last-child,:nth-of-type 和 :nth-last-of-type。

这些选取器也被称作伪类,可以为已有的选取器增加风格。我们来看一些实际的例子。

:nth-child

这个伪类允许为一组元素添加风格。最常见的例子就是在表格中隔行高亮数据单元格:

tr:nth-child(even)

{

background-color: #E8E8E8;

}

实际的例子(需要Firefox 3.5):

Row 1

Row 2

Row 3

Row 4

还可以使用特殊的标记来为超过两组元素添加风格。文档中对规则的描述不太准确,但是在例子中的“3”把元素分为三组,“+1”则是在组中的偏移量。在规范中还有很多例子。

tr:nth-child(3n+1) { background-color: red; }

tr:nth-child(3n+2) { background-color: green; }

tr:nth-child(3n+3) { background-color: blue; }

实际的例子(需要Firefox 3.5):

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

:nth-last-child

:nth-last-child伪类同:nth-child的工作方式非常相似,不过他是从后向前数子节点:

tr:nth-last-child(3n+3) { background-color: red; }

tr:nth-last-child(3n+2) { background-color: green; }

tr:nth-last-child(3n+1) { background-color: blue; }

例子(需要Firefox 3.5):

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

:nth-of-type

:nth-of-type伪类使用跟其他伪类类似的语法,但是允许你根据元素类型进行选取。

div:nth-of-type(odd) { border-color: red }

div:nth-of-type(even) { border-color: blue }

例子(需要Firefox 3.5):

I should be red!

I should be blue!

:nth-last-of-type

:nth-last-of-type同:nth-of-type功能类似,不过也是从后向前查子节点。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航