CSS：无法获得多个：nth-​​child选择器可以工作

Question

我有一个主菜单和4种颜色和Id喜欢每种颜色循环1-4然后再开始如果有超过4项。

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

.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;
}

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

Answer 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

Answer 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;
}