在多级菜单上设置最后一个菜单项的样式

Question

我试图在菜单上的最后一个菜单选项中设置样式，该菜单上有下拉列表。 这就是它的样子。 ＆gt;意味着它是一个下拉。

家庭AAA＆gt; BBB＆GT; CCC DDD联系捐赠

我试图让捐赠选项有一个带有白色字母的红色背景，所以我把它放进去了：

#main-nav  li:last-child a { 
   color:#ffffff; 
   background-color:rgb(178, 45, 58); 
   border-top-right-radius: 5px; 
   border-bottom-right-radius: 5px; 
   padding: 5px;
}

但这也是每个下拉列表中的最后一项也是红色的！

如何才能使主菜单的最后一项被风格化？

谢谢！

Answer 1

您需要定位导航列表的直接子项。使用此选择器：

#main-nav > ul > li:last-child > a

Answer 2

我打算发布这个，但请接受克里斯的回答，因为他是对的，除了他没有正确的Id导航名称。

#navigation > ul > li:last-child > a{
    color:Red;
}

以下是 JSFiddle ，证明“捐赠”是唯一被转为red的内容。