CSS：样式列表项基于它们出现的顺序而不是类？

Question

我正在使用CMS生成一个只有很少样式选项的站点地图，基本上，它不允许我向列表项添加类，我需要它们给它们不同的背景颜色。

现在我知道有一些first-child和last-child伪类允许我设置列表中的第一个和最后一个项目的样式，但是有没有CSS允许我调用列表中的其他项目一个班级不能分配给他们？

Answer 1

使用CSS3中的:nth-child()：

/* select the third element if it's an li */
li:nth-child(3) {
    background-color: yellow;
}

旧版浏览器中的

:nth-child() won't work，例如IE8，但there's a CSS2 workaround。

Answer 2

nth-child，nth-of-type

<强>示例：

选择列表中的第二项

li:nth-child(2) {/*styles*/}

选择奇数列表项

li:nth-child(odd) {/*styles*/}

选择第3，第6，第9，...列表项

li:nth-child(3n) {/*styles*/}

选择第1，第5，第9，......列表项

li:nth-child(4n+1) {/*styles*/}

Answer 3

CSS2不支持：nth-​​child（n），maby你可以为＆lt; ul＆gt;颜色在正确的位置。但我说用老浏览器搞砸人们;）

Answer 4

使用CSS2，也许不是。使用CSS3，有nth-child()选择器：

element:nth-child(2) { ... }

以上将会得到第二个孩子。

jsFiddle

否则，您可以使用JavaScript / jQuery来获得所需的结果。这是一个jQuery示例：

$(function () {
    $('selector').eq(1).css('background', 'blue');
});​

jsFiddle