示例代码：

<style> li:nth-child(2n){color:#f00;} /* 偶数 */ li:nth-child(2n+1){color:#000;} /* 奇数 */ </style> <ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> <li>列表项四</li> </ul>

因为(n)代表一个乘法因子，可以是0, 1, 2, 3, ..., 所以(2n)换算出来会是偶数，而(2n+1)换算出来会是奇数

HTML示例代码：

<div> <p>第1个p</p> <p>第2个p</p> <p>第3个p</p> <p>第4个p</p> <p>第5个p</p> </div>

CSS Case 1：

p:nth-child(2){color:#f00;}

很明显第2个p会被命中然后变成红色

CSS Case 2：

p:nth-child(3){color:#f00;}

这是会命中第3个p么？如果你这么认为那就错了，这条选择符就不会命中任何一个元素。

CSS Case 3：

p:nth-child(4){color:#f00;}

这时你以为会命中第4个p，但其实命中的却是第3个p，因为它是第4个子元素

E:nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增。

假设不确定第1个子元素是否为E，但是又想命中第1个E，应该这样写：

p:first-of-type{color:#f00;}

或者这样写：

p:nth-of-type(1){color:#f00;}

参考 E:first-of-type 和 E:nth-of-type(n)