Css 为什么不是'；t我的a:hover:n子代码工作吗？

此简单代码不起作用：

HTML:

每个链接应具有不同的悬停颜色。它们都显示为红色。为什么?

---

jsIDLE:

因为这里只有一个

，因为这里只有一个
：

#topnav li:nth-child(1) a:hover { color:#ff0000; }
#topnav li:nth-child(2) a:hover { color:#FF7700; }
#topnav li:nth-child(3) a:hover { color:#FFFF00; }

在这里：

在浪费了这么多时间之后，我才意识到第n个孩子应该在
li
，而不是
a
。像这样：

#topnav li:first-child a:hover{
    color:#ff0000;
    }

#topnav li:nth-child(2) a:hover{
    color:#FF7700;
    }

    #topnav li:nth-child(3) a:hover{
    color:#FFFF00;
    }

在浪费了这么多时间之后，我才意识到第n个孩子应该在
li
，而不是
a
。像这样：

#topnav li:first-child a:hover{
    color:#ff0000;
    }

#topnav li:nth-child(2) a:hover{
    color:#FF7700;
    }

    #topnav li:nth-child(3) a:hover{
    color:#FFFF00;
    }

#topnav li:first-child a:hover{
    color:#ff0000;
    }

#topnav li:nth-child(2) a:hover{
    color:#FF7700;
    }

    #topnav li:nth-child(3) a:hover{
    color:#FFFF00;
    }