css - 如何根据顺序设置列表项的样式

Question

我有一个由 li 列表组成的菜单。根据其在列表中的位置，每个 li 项都需要具有不同的背景颜色:

第一个元素是粉红色的，
第二个是橙色的，
第三个是绿色，
等等……

每个元素都有自己的 ID，因此为每个元素赋予自己的 CSS 样式应该没有问题。 (比如第一个item的ID是menu-item-30，第二个item的ID是menu-item-57，以此类推，ID为随机数。)

但是，该站点应该以不同的语言运行，并且在每种语言中，列表项都有不同的 ID。 (例如，英文菜单中 ID 为 menu-item-30 的元素在法语菜单中的 ID 为 menu-item-241。)

我想知道是否唯一的方法是将 ID 添加到 CSS 规则中，如下所示:

#header #access li.menu-item-30,
#header #access li.menu-item-210, /*spanish*/
#header #access li.menu-item-241 /*french*/{
/*add header prefix to li's only'*/
   background: url('images/headers/navbar.png') 0 -124px repeat-x transparent;
   border-bottom: 3px solid #f26122;

或者如果有一种方法 - 在 IE7 及更高版本中工作 - 使用更通用的规则，例如第 nth-child 等。

Answer 1

只有一种方法。您可以为元素附加 rel="home" 属性，然后使用 css 您将能够做到这一点:#header #access li a[rel="home"] { }

如果您无权访问代码，那么唯一的方法就是为每个元素编写 css。