导航未选中li元素CSS颜色无法修改问题求助

我需要实现导航菜单的以下样式：

• 未选中的<li>元素字体颜色为浅蓝色（light blue）
• 选中的<li>元素字体颜色为白色，且底部带有白色下划线

目前的问题是：可以修改选中/未选中项的尺寸、背景色等样式，但仅能修改选中项的字体颜色，未选中项的字体颜色始终保持白色。已经通过开发者工具排查样式冲突、调整选择器优先级、检查语法错误，也尝试过强制刷新页面和更换浏览器测试，仍未找到原因。

现有代码 #

CSS代码

/* 原代码存在语法错误，@media规则缺少包裹样式的大括号 */
@media only screen and (max-width: 600px) .nav-destinations li.inactive-mini {
  color: var(--light-blue);
}

@media only screen and (max-width: 600px) .nav-destinations li {
  margin-right: 16px;
}

.nav-destinations li {
  display: inline;
  margin-right: 24px;
}

.nav-text1,
.nav-text2 {
  font-family: 'Barlow Condensed', sans;
  font-size: 16px;
  letter-spacing: 2.7px;
}

* {
  margin: 0;
  padding: 0;
}

@media only screen and (max-width: 600px) .nav-destinations ul {
  text-align: center;
}

:root {
  --dark-blue: #0B0D17;
  --light-blue: #D0D6F9;
  --white: #FFFFFF;
}

HTML代码

<div id="destination-nav" class="nav-destinations">
  <ul id="destination-nav-ul">
    <li id='moon' class="nav-text2 active-mini">MOON</li>
    <li id="mars" class="nav-text2 inactive-mini"><a href="destination-mars.html">MARS</a></li>
    <li id="europa" class="nav-text2 inactive-mini"><a href="destination-europa.html">EUROPA</a></li>
    <li id="titan" class="nav-text2 inactive-mini"><a href="destination-titan.html">TITAN</a></li>
  </ul>
</div>

解决建议 #

• 修复@media语法错误：所有@media规则都缺少包裹样式的大括号，导致媒体查询内的样式无法生效。正确写法示例：

  @media only screen and (max-width: 600px) {
    .nav-destinations li.inactive-mini {
      color: var(--light-blue);
    }
    .nav-destinations li {
      margin-right: 16px;
    }
    .nav-destinations ul {
      text-align: center;
    }
  }
  

• 针对<a>标签设置样式：未选中项的<li>内包含<a>标签，浏览器默认的链接样式会覆盖<li>的颜色设置，需要直接给<a>标签设置颜色：

  .nav-destinations li.inactive-mini a {
    color: var(--light-blue);
    text-decoration: none; /* 去掉默认下划线 */
  }
  

• 完善选中项样式：给选中项添加下划线，同时确保颜色优先级：

  .nav-destinations li.active-mini {
    color: var(--white);
    border-bottom: 2px solid var(--white);
    padding-bottom: 8px; /* 调整下划线与文字的间距 */
  }
  

• 提升选择器优先级：如果仍有样式覆盖问题，可以增加选择器的特异性，比如结合父类和类名：

  .nav-destinations .nav-text2.inactive-mini a {
    color: var(--light-blue);
  }
  

内容的提问来源于stack exchange，提问作者Val