在CSS3中nth-child()伪类对于在HTML中创建格式化的Excel样式表非常有用。也用于生成网格布局而不必求助于表格。

 

　　首先我们来了解一下nth-child()伪类的相关知识。【相关视频教程推荐：css教程，css3教程！】

 

　　nth-child()伪类的基本规则：

 

　　我们使用的语法是：nth-child（an+b）其中a是频率，b是初始偏移量。这生成了一个从n=0开始的无限级数，但只包含正值。

 

　　一些例子可能会使这更清楚：

 

　　2n，2n+0

 

　　2,4,6,8,10,12......

 

　　2n+1或奇数

 

　　1,3,5,7,9,11......

 

　　2n+2

 

　　2,4,6,8,10,12......

 

　　2n+3

 

　　3,5,7,9,11,12......

 

　　2n+4

 

　　4,6,8,10,12,14......

 

　　3n，3n+0或3n+3

 

　　3,6,9,12,15,18......

 

　　3n+1

 

　　1,4,7,10,13,16......

 

　　因此，你可以看到系列从b开始，然后为每个值增加a。跳过任何零或负的结果意味着我们不能在DOM树中向后看。

 

　　nth-child()伪类的示例：

 

　　接下来我们通过示例来看看nth-child()伪类的作用：

 

　　示例一：和悬停一起连用

 

　　这个例子使用了nth-child伪类和~一般兄弟选择器。

 

　　首先，我们通过简单地向左侧浮动多个div容器并使用nth-child在每十个框之后开始一个新行来创建网格：

 

　　#stagediv{

 

　　float:left;

 

　　margin:5px;

 

　　width:60px;

 

　　height:50px;

 

　　background:#efefef;

 

　　}

 

　　#stagediv:hover{background:red;}

 

　　#stagediv:nth-child(10n+1){clear:left;}

 

　　在HTML中，我们为每个div容器（＃div1，＃div2，...，＃div100）添加了一个id，然后分配了一个悬停事件，如下所示：

 

　　#div1:hover~div:nth-child(1n){

 

　　background:yellow;

 

　　}

 

　　#div2:hover~div:nth-child(2n){

 

　　background:yellow;

 

　　}

 

　　#div3:hover~div:nth-child(3n){

 

　　background:yellow;

 

　　}

 

　　#div4:hover~div:nth-child(4n){

 

　　background:yellow;

 

　　}

 

　　...





本文转载自中文网