Html 我的一个菜单项在选中时不改变颜色

我正在为我正在学习的课程编写一个网站，我遇到了一个奇怪的问题。我希望顶部的菜单项在当前页面中时变灰。除了一个，这对所有人都有效。下面是本节的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>

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还比较陌生，所以非常感谢您的帮助。谢谢大家!

这是因为这条线

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

---

从这里删除

color:White

如果我的答案适合您，请您投票并将其标记为已解决，这样我们就可以结束此问题了吗？快速提示：使用DOM检查器在调试此类问题方面有很长的路要走。通过突出显示最后一个元素，您将看到您的灰显颜色被：last-child规则覆盖。