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

我使用的CMS生成的网站地图只有很少的样式选项，基本上，它不会允许我将类添加到列表项中，我需要它们给它们不同的背景颜色。CSS：基于它们出现的顺序而不是类的样式列表项？

现在我知道有第一个孩子和最后一个孩子的伪类可以让我对我的列表中的第一个和最后一个项目进行样式设置，但是是否有任何CSS允许我调用列表中的其他项目如果一个班级不能分配给他们？

2012-07-18 Jane

的 “CSS 2” 是令人困惑 - 是 “CSS级别2” 或 “CSS来”？请注意'：last-child'在CSS2中不存在，只有'：first-child'。 – BoltClock

使用:nth-child()从CSS3：

/* 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。

来源

2012-07-18 13:50:58 thirtydot

我刚刚更新了我的一个类似的解答与CSS2解决方法的说明：http://stackoverflow.com/questions/9682521/how-do-i-get-the-nth-child-of-an-element-using -css2选择器/ 9682598＃9682598 – BoltClock

nth-child，nth-of-type

实例：

选择列表

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

选择奇列表项

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

选择第三第二项，所述第六，第9，...列表项

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

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

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

来源

2012-07-18 13:51:23 Ana

CSS2不支持：第n个孩子（N），maby你可以在右边的位置上制作< ul>的背景图像。但我说老人们用旧浏览器;）

来源

2012-07-18 13:52:02 Gijs

与CSS2，也许不是。随着CSS3，还有的nth-child()选择：

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

以上将获得的第二个孩子。

jsFiddle

否则，你可以使用JavaScript/jQuery来得到你想要的结果。这里是一个jQuery的例子：在这个问题

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

jsFiddle

来源

2012-07-18 13:52:13 Zhihao

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

回答

相关问题