CSS：last-child AND：将鼠标悬停在ul中的链接上

Question

我正在对导航菜单的最后一个子元素进行样式设置，似乎可以使用以下代码来做到这一点：

.aston-menu-light ul > li:last-child {
    border:2px solid blue;
    border-radius: 50px;
    padding:0 20px 0 20px;
} 

.aston-menu-light ul > li > ul > li:last-child {
    border:none !important;
    padding:0 !important;
} 

.aston-menu-light ul > li:last-child:hover {
    background-color:#ffff;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
} 

当我尝试将<a>鼠标悬停在最后一个孩子上时，麻烦就来了。我正在使用这个：

.aston-menu-light ul > li > a:last-child:hover {
    color:red !important;
} 

但这似乎为所有<a>标签加上了样式，而不仅仅是最后一个孩子。我已经尝试过各种变体，例如：ul > li a但我似乎无法正常工作。

我在这里有一个Codepen：https ://codepen.io/shaun-taylor/pen/LXdGGN

我的主要目标是，将鼠标悬停在顶级链接上时，仅将其上的最后一个链接变为红色，谢谢您的阅读！

Answer 1

你应该改变

.aston-menu-light ul > li > a:last-child:hover {
    color:red !important;
}

至

.aston-menu-light>ul>li:last-child > a:hover {
    color:red !important;
} 

.aston-menu-light ul > li > a:last-child:hover {
    color:red !important;
}

.aston-menu-light>ul>li:last-child > a:hover {
    color:red !important;
}