CSS：无法获得多方面的：第n个孩子选择工作(CSS: Can't get multiple

我有一个主菜单和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个孩子测试人员仔细检查具体的选择，但不能制定出什么错误抱歉。

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

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

文章来源: CSS: Can't get multiple :nth-child selectors to work