邯鄲網(wǎng)站建設(shè)講解CSS3 :nth-child() 的知識

　　邯鄲網(wǎng)站建設(shè)講解CSS3:nth-child()的知識，CSS3中nth-child()偽類對于在HTML中創(chuàng)建格式化的Excel樣式表非常有用。也用于生成網(wǎng)格布局而不必求助于表格。

　　首先我們來了解一下nth-child()偽類的相關(guān)知識。

　　nth-child()偽類的基本規(guī)則：

　　我們使用的語法是：nth-child（an+b）其中a是頻率，b是初始偏移量。這生成了一個從n=0開始的無限級數(shù)，但只包含正值。

　　一些例子可能會使這更清楚：

　　2n，2n+0

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

　　2n+1或奇數(shù)

　　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。跳過任何零或負(fù)的結(jié)果意味著我們不能在DOM樹中向后看。

　　nth-child部分用法如下

　　:nth-child(2)選取第幾個標(biāo)簽，“2可以是你想要的數(shù)字”

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

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

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

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

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

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

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

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

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

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

　　:first-child選取第一個標(biāo)簽

　　:last-child選取最后一個標(biāo)簽

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

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

　　:nth-child(2n):nth-child(even)選取偶數(shù)標(biāo)簽

　　:nth-child(2n+1):nth-child(odd)選取奇數(shù)標(biāo)簽

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

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

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

　　:nth-last-child(2)選取倒數(shù)第二個標(biāo)簽

　　:nth-last-child(n)選取倒數(shù)第N個標(biāo)簽