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()怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。