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

Question

我使用的 CMS 生成的站点地图几乎没有样式选项，基本上，它不允许我向列表项添加类，我需要它们为它们提供不同的背景颜色。

现在我知道有 first-child 和 last-child 伪类可以让我为列表中的第一个和最后一个项目设置样式，但是如果一个类可以，是否有任何 CSS 允许我调用列表中的其他项目不被分配给他们？

Answer 1

:nth-child()从 CSS3使用：

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

:nth-child()在 IE8 等旧浏览器中无法使用，但有一个 CSS2 解决方法。

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)，也许你可以为 < ul > 制作背景图像，颜色在正确的位置。但我说用旧浏览器搞砸的人;）

Answer 4

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

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

以上将得到第二个孩子。

jsFiddle

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

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

jsFiddle