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(2)选取第几个标签，“2可以是你想要的数字”

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

　　:nth-child(n+4)选取大于等于4标签，“n”表示从整数，下同

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

　　:nth-child(-n+4)选取小于等于4标签

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

　　:nth-child(2n)选取偶数标签，2n也可以是even

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

　　:nth-child(2n-1)选取奇数标签，2n-1可以是odd

　　.demo01 li: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个标签

　　更多云南龙头科技有限公司网站案例请查看：http://www.ynlongtou.com/case.asp?id=3

　　云南龙头科技有限公司凭借多年的网站建设经验，坚持以“帮助中小企业实现网络营销化”为宗旨，成功帮助多家中小企业实现互联网信息化建设，得到了客户的一致好评。如你有任何关于网站建设的疑问，请立即点击咨询云南龙头科技有限公司资深营销专家或拨打咨询热线：13759574266，我们会详细为你一一解答你心中的疑难。