css伪类nth-child()怎么用

今天小编给大家分享一下css伪类nth-child()怎么用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

专注于为中小企业提供网站设计、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业梨林免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了近千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

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

首先我们来了解一下nth-child()伪类的相关知识。

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;

}

...

以上就是“css伪类nth-child()怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。

新闻名称：css伪类nth-child()怎么用
网站网址：http://cdiso.cn/article/ghjcoo.html