CSS无法修改导航栏超链接文字颜色？求问题排查方案

问题根源 #

你当前的CSS代码只给<li>元素设置样式，但<a>作为超链接标签，浏览器自带默认的文本颜色样式（通常是蓝色），这个默认样式的优先级高于父元素<li>的继承样式。哪怕给<li>的color加!important也没用——因为你根本没选中<a>标签本身，样式自然不会生效。

修复代码 #

直接针对导航栏里的<a>标签设置颜色，同时处理hover状态：

nav ul {
  list-style: none;
  text-align: center;
  background-color: #495e57;
  border-radius: 10px;
}

nav li {
  display: inline-block;
  padding: 20px;
  font-size: 1.5rem;
  border-radius: 10px;
}

/* 设置链接默认颜色 */
nav li a {
  color: #6a0dad; /* 这里用紫色示例，可换成你需要的蓝色值 */
  text-decoration: none; /* 可选：移除默认下划线 */
}

nav li:hover {
  background-color: #1f2926;
}

/* 鼠标悬停时修改链接颜色 */
nav li:hover a {
  color: white;
}

补充说明 #

• 内联样式能生效是因为它的优先级比外部CSS高，但这种写法不利于代码维护，不推荐使用。
• 必须直接选中<a>标签设置样式，才能覆盖浏览器给超链接的默认样式。

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