我的菜单项之一在被选中时没有改变颜色

Question

我正在为一个正在上课的班级编写网站，但遇到一个奇怪的问题。我希望顶部的菜单项在当前页面时显示为灰色。这适用于除一个以外的所有其他程序。这是此部分的HTML和CSS，以及正在发生的情况的屏幕截图。

菜单的HTML：

<nav>
    <ul>
        <li><a href="Home.html">Home</a></li>
        <li><a href="About Me.html">About Me</a></li>
        <li><a href="Hobbies.html">Hobbies</a></li>
        <li><a href="Extras.html">Extra Curriculars</a></li>
        <li><a href="Projects.html">Projects</a></li>
        <li class="selected">Self Reflections</li>
    </ul>
</nav>

菜单的CSS：

nav ul {
    list-style-type: none;
    background-color: DarkRed;
    border: 4px solid Black;
    border-radius: 10px;
    font-family: sans-serif;
    font-weight: bold;
    padding: 16px;
}
nav ul li {
    display: inline;
    border-right: 2px solid Black;
    padding-right: 8px;
    padding-left: 8px;
}
nav ul li:last-child {
    border-right: none;
    color: White;
}
nav ul li a {
    color: White;
}

nav ul li a {
    text-decoration: none;
}

nav li.selected {
    color: Gray;
}
nav li a:hover {
    text-decoration: underline;
}

我想要的屏幕截图：

一页上发生的事情的屏幕截图：

如您所见，“自我反思”页面是当前页面。问题在于它没有变成灰色。该链接未处于活动状态，我只希望它与其余页面一样为灰色。我对HTML和CSS还是很陌生，因此非常感谢您的帮助。谢谢！

Answer 1

因为这行

nav ul li:last-child {
    border-right: none;
    color: White;
}

从此处删除color: White