邯鄲網站建設講解CSS3 :nth-child() 的知識

　　邯鄲網站建設講解CSS3: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(2)選取第幾個標簽，“2可以是你想要的數字”

　　.demo01li:nth-child(2){background:#090}

　　:nth-child(n+4)選取大于等于4標簽，“n”表示從整數，下同

　　.demo01li:nth-child(n+4){background:#090}

　　:nth-child(-n+4)選取小于等于4標簽

　　.demo01li:nth-child(-n+4){background:#090}

　　:nth-child(2n)選取偶數標簽，2n也可以是even

　　.demo01li:nth-child(2n){background:#090}

　　:nth-child(2n-1)選取奇數標簽，2n-1可以是odd

　　.demo01li:nth-child(2n-1){background:#090}

　　:nth-child(3n+1)自定義選取標簽，3n+1表示“隔二取一”

　　:first-child選取第一個標簽

　　:last-child選取最后一個標簽

　　:nth-child(2)選取第二個標簽

　　:nth-child(n)選取第N個標簽

　　:nth-child(2n):nth-child(even)選取偶數標簽

　　:nth-child(2n+1):nth-child(odd)選取奇數標簽

　　:nth-child(n+4)選取大于等于4的標簽

　　:nth-child(-n+4)選取小于等于4的標簽

　　:nth-child(3n+1)自定義選擇標簽，n取0開始，隔二取一個標簽

　　:nth-last-child(2)選取倒數第二個標簽

　　:nth-last-child(n)選取倒數第N個標簽