CSS：无法让多个 :nth-child 选择器工作答案

【问题标题】：CSS: Can't get multiple :nth-child selectors to workCSS：无法让多个 :nth-child 选择器工作
【发布时间】：2013-12-31 01:42:44
【问题描述】：

我有一个主菜单和 4 种颜色，我希望每种颜色在 1-4 中循环，然后如果超过 4 项则重新开始。

但每个菜单项只接收第一种颜色 - 这是我的 CSS（从 less 编译）：

.main-nav li a:nth-child(4n+1) {
  background-color: #7ebdeb;
}
.main-nav li a:nth-child(4n+2) {
  background-color: #abc081;
}
.main-nav li a:nth-child(4n+3) {
  background-color: #f4d1a2;
}
.main-nav li a:nth-child(4n+4) {
  background-color: #e96956;
}

我没有指定其他背景颜色 - 我一直在绞尽脑汁并尝试了几个在线 nth-child 测试人员来仔细检查特定的选择器，但无法弄清楚出了什么问题，抱歉。

【问题讨论】：

你真的一里有多个a标签吗？
您真的要为列表项内的不同链接着色，而不是列表项本身吗？

标签： css css-selectors

【解决方案1】：

您在每个列表项中重复定位相同的元素，即锚点。每个列表项只有一个子项。你可能想要：

.main-nav li:nth-child(4n+1) {
    background-color: #7ebdeb;
}
.main-nav li:nth-child(4n+2) {
    background-color: #abc081;
}
.main-nav li:nth-child(4n+3) {
    background-color: #f4d1a2;
}
.main-nav li:nth-child(4n+4) {
    background-color: #e96956;
}

jsFiddle example

【讨论】：

天啊，真是个白痴！将尽快接受您的回答。允许，应该是.main-nav li:nth-child(4n+1) a欢呼。

【解决方案2】：

我想这就是你想要的：

JSFiddle

.main-nav li:nth-child(4n+1) a {
  background-color: #7ebdeb;
}
.main-nav li:nth-child(4n+2) a {
  background-color: #abc081;
}
.main-nav li:nth-child(4n+3) a {
  background-color: #f4d1a2;
}
.main-nav li:nth-child(4n+4) a {
  background-color: #e96956;
}

【讨论】：