导航栏nav元素color属性未生效 已访问链接颜色异常

问题现象 #

• 导航栏<li>列表项内嵌套<a>锚点链接时，已点击访问过的链接文本颜色未按自定义样式加载
• 项目内仅创建了Order、Main Page对应的页面文件，Gallery、Pricing页面临时用href="#"占位；自定义颜色仅在指向真实存在文件的链接上失效，所有导航链接的li a:hover伪类样式均可正常触发
• 效果参考：
  

关联代码 #

CSS 样式片段 #

/* NAV Section - Start! */

nav {
  background: #55595c;
  max-height: 90px;
}

nav img {
  position: relative;
  left: 880px;
  bottom: 55px;
  height: 120px;
  width: 150px;
}

.nav ul {
  list-style-type: none;
  overflow: hidden;
  display: flex;
  justify-content: center;
  position: relative;
  top: 25px;
  left: 500px;
}

.nav li {
  color: #4128ba;
  float: left;
  font: 16;
  text-decoration: none;
}

.nav li a {
  padding: 10px;
  display: block;
}

.nav li a:hover {
  color: #00ffff;
}


/* NAV Section - End! */

HTML 结构片段 #

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="assets/logo2.png" type="icon/x-icon">
  <title>H&L Equipment - Main!</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <!-- Navigation Bar - Start! !-->
  <nav>
    <div class="nav">
      <ul>
        <li><a href="order.html">Order</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="index.html">Main Page</a></li>
      </ul>
    </div>
    <div class="img">
      <img src="assets/logo2.png">
    </div>
  </nav> <br>
  <!-- Navigation Bar - END! !-->
  <!-- Showcase - Start! !-->
  <h2 id="h2-showcase">What do we offer?</h2>
  <p id="p-showcase">We offer multiple high-quality bodybuilding equipment!</p> <br> <br>
  <!-- Showcase - End! !-->
</body>
<!-- Showcase Photos - Start! !-->
<div class="showcase-photos">
</div>
<!-- Showcase Photos - End! !-->

<br> <br>

<!-- Login Form !-->

</html>

问题原因 #

1. 浏览器对<a>标签自带默认伪类样式，未显式定义a:link、a:visited状态样式时，已访问链接（即href指向真实存在、被浏览过的地址的链接）会加载浏览器默认的访问后紫色样式。原代码把链接颜色写在了父元素<li>上，<a>标签的默认样式优先级高于继承自父元素的颜色，直接覆盖了自定义色值。
2. 指向#的锚点链接不会被浏览器记录为已访问状态，不会触发visited默认样式，因此表现为“仅指向真实存在页面的链接样式失效”。
3. 原代码中:hover伪类直接绑定在a标签上，因此所有链接的hover效果都能正常触发。
4. 原代码存在两处无效写法：写在.nav li上的font: 16缺少单位，不符合CSS语法；text-decoration: none写在li上无法控制<a>标签的默认下划线。

修复方案 #

1. 按照LVHA顺序（:link → :visited → :hover → :active）显式定义<a>标签所有状态的样式，覆盖浏览器默认规则，将链接相关的样式直接绑定到a标签而非父元素li上，修改后的导航链接样式如下：

.nav li {
  float: left;
  /* 移除原写在li上无效的color、font、text-decoration属性 */
}
.nav li a {
  padding: 10px;
  display: block;
  font-size: 16px; /* 修正原无效的font写法，补充单位 */
  text-decoration: none; /* 去除链接默认下划线 */
  color: #4128ba; /* 链接默认状态颜色 */
}
.nav li a:visited {
  color: #4128ba; /* 已访问链接颜色，可根据需求自定义 */
}
.nav li a:hover {
  color: #00ffff;
}
.nav li a:active {
  color: #00ffff; /* 点击瞬间的链接状态颜色，可选配置 */
}

2. 后续Gallery、Pricing页面对应的文件创建完成后，上述样式会自动适配，无需额外调整。

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