根URL访问时CSS下拉菜单hover链接颜色与index.html渲染不一致

故障由CSS伪类优先级冲突、书写顺序不符合规范导致，和页面路径无直接关联：

• 现有CSS代码中，下拉菜单链接的hover样式.dropdown-content a:hover写在已访问链接样式.dropdown-content a:visited之前，两个选择器的优先级完全相等，按照CSS层叠规则，后定义的样式会覆盖先定义的样式
• 访问站点根URL时，浏览器保存了下拉菜单对应链接的访问记录，:visited伪类持续生效，鼠标悬浮时后定义的已访问状态颜色（米色#efdec6）会覆盖hover状态设置的浅蓝色（#c6e7e7）
• 直接打开index.html时，多为本地文件环境或首次加载无对应访问历史，:visited规则未触发，因此hover效果显示正常，和代码本身是否添加!important无直接关联

两种方法选一种即可解决问题：

方法一：调整伪类书写顺序 #

严格遵循CSS链接伪类的LVHA书写顺序规则（顺序为:link → :visited → :hover → :active），将已访问链接的样式规则移动到hover样式规则之前，调整后对应代码片段如下：

.dropdown-content a:visited {
  background-color: #502f2f;
  color: #efdec6;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: #502f2f;
  color: #c6e7e7;
  text-decoration: none;
}

调整后hover状态的样式后定义，鼠标悬浮时会正常覆盖已访问状态的颜色，显示预期浅蓝色。

方法二：补全已访问链接的hover样式 #

如果不想调整现有代码顺序，可以新增一条匹配精度更高的规则，单独指定已访问链接在hover状态下的颜色，彻底避免优先级冲突：

.dropdown-content a:visited:hover {
  color: #c6e7e7;
}

• 页面Head标签代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Filthy Hippie, a Petz 3/4 fansite</title>
    <link rel="icon" type="image/x-icon" href="/favicon.gif">
    <link rel="stylesheet" type="text/css" href="/style.css">
    
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

• 修复后完整下拉菜单CSS代码

.topnav {
  overflow: hidden;
  background-color: #502f2f;
  font-size: 20px;
  font-family: 'Press Start 2P', serif;
  text-shadow: 2px 2px 2px #442828;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

.topnav a {
  float: left;
  display: block;
  color: #e794ad;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.visited {
  color: #e794ad;
  text-decoration: none;
}

.active {
  background-color: #502f2f;
  color: #d69494;
  text-decoration: none;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 20px;    
  border: none;
  outline: none;
  color: #e794ad;
  padding: 14px 16px;
  text-shadow: 2px 2px 2px #442828;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #502f2f;
  color: #efdec6;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #efdec6;
  font-size: 14px;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #502f2f;
  color: #d69494;
  text-decoration: none;
}

.dropdown-content a:visited {
  background-color: #502f2f;
  color: #efdec6;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: #502f2f;
  color: #c6e7e7;
  text-decoration: none;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a, .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: none;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;
  display: block;}
  .topnav.responsive .icon {display: block;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

• index.html页面正常效果参考
• 根URL访问异常效果参考

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