CSS：无法获得多个：第n个子选择器工作 [英] CSS: Can't get multiple :nth-child selectors to work

问题描述

我有一个主菜单和4种颜色，每种颜色的Id循环通过1-4，然后重新开始，如果有超过4个项目。

I have a main menu and 4 colours and Id like each colour to cycle through 1-4 then start again if there are more than 4 items.

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

But each menu item only receives the first colour - this is my CSS (compiled from 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测试人员仔细检查具体的选择器，但不能解决出错的原因。

I have no other background colours specified - I've been racking my brain and have tried several online nth-child testers to double check the specific selectors but can't work out what's going wrong sorry.

推荐答案

您将重复定位每个列表项（锚点）中的相同元素。每个列表项只有一个子级。您可能需要：

You are targeting the same element in each list item, the anchor, repeatedly. Each list item only has one child. You probably want:

.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示例

jsFiddle example

这篇关于CSS：无法获得多个：第n个子选择器工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！