CSS文本颜色不显示：修改a标签与标题文本颜色及hover效果

问题原因 #

• 浏览器默认样式或全局重置样式覆盖了你自定义的颜色规则，导致文本显示黑色。
• 你的a:hover仅设置了下划线颜色（text-decoration-color），未修改文字本身颜色；h4标签未编写hover状态的样式规则，因此hover效果不生效。
• 选择器权重不足，比如使用a这类基础选择器，但页面中存在更高权重的规则（如带类名的选择器）将颜色覆盖。

代码解决方案 #

示例HTML结构 #

<a href="#" class="nav-explore">Explore</a>
<h4 class="nav-settings">Settings</h4>

基础CSS代码 #

通过类选择器确保样式权重足够，覆盖默认样式：

/* 设置a标签默认颜色与样式 */
.nav-explore {
  color: #2563eb; /* 自定义默认蓝色 */
  text-decoration: none; /* 可选：移除默认下划线，自主控制 */
}

/* a标签hover状态：同步修改文字与下划线颜色 */
.nav-explore:hover {
  color: #1d4ed8; /* hover时的深色 */
  text-decoration: underline;
  text-decoration-color: #1d4ed8; /* 下划线与文字同色 */
}

/* 设置h4标签默认颜色 */
.nav-settings {
  color: #374151; /* 自定义默认深灰色 */
  cursor: pointer; /* 可选：鼠标移至上方显示手型，提示可交互 */
  margin: 0; /* 移除默认外边距，避免布局偏移 */
}

/* h4标签hover状态的颜色 */
.nav-settings:hover {
  color: #1f2937; /* hover时的更深色 */
}

应对全局样式覆盖的方案 #

如果页面存在全局重置规则（如* { color: black; }），可通过结合父元素类名提高选择器权重：

/* 假设父容器有类名nav-container */
.nav-container .nav-explore {
  color: #2563eb;
}

.nav-container .nav-explore:hover {
  color: #1d4ed8;
}

.nav-container .nav-settings {
  color: #374151;
}

.nav-container .nav-settings:hover {
  color: #1f2937;
}

额外提示 #

• 使用浏览器开发者工具（F12）检查元素，查看当前生效的样式，若存在被划掉的规则，即可快速定位样式被覆盖的原因。
• 尽量避免使用!important，优先通过优化选择器权重解决样式冲突问题，比如给元素添加专属类名，而非直接使用标签选择器。

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