接css3选择器（一）

八、结构性伪类选择器【:nth-child(n)】

:nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素，和jquery中一样。

其中"n"是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式（2n+1,-n+5）和关键字(odd【奇数】、even【偶数】)，但是参数n的值起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

Note:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。如下表所示：

所以要达到斑马线的效果就非常容易了。

偶数行变橙色，ol >li:nth-child(2n|even){background:orange}；

奇数行变绿色，ol > li:nth-child(2n+1|2n-1|odd){background: green;}

九、 结构性伪类选择器【:nth-last-child(n)】

：nth-last-child(n)和:nth-child(n)相似，但是多了个last，这个last代表从后向前，其他地方没差别。

举例：设置列表中倒数第五个列表项背景色为橙色。

<style type="text/css">  ol > li:nth-last-child(5){ background: orange;}</style><ol> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> <li>item9</li> <li>item10</li></ol>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：css3 选择器（二）

关键词：CSS