为何a元素未继承导航栏的#fff文本颜色？

浏览器默认给<a>标签设置了文本颜色（通常为蓝色），这个默认样式的优先级高于从父元素继承来的颜色，所以直接给.navbar设置color: #fff时，只有没有默认文本颜色的<h1 class="logo">会生效，.nav-links下的<a>标签不受影响。

以下是几种可行的解决方式：

• 直接指定目标a标签的颜色
  精准选中.navbar下.nav-links里的所有a标签，强制设置白色：

  .navbar .nav-links a {
    color: #fff;
  }
  

• 强制a标签继承父元素颜色
  让.navbar下的所有a标签继承父级的颜色值，这样后续修改.navbar的颜色时，a标签也会同步变化：

  .navbar {
    color: #fff;
  }
  .navbar a {
    color: inherit;
  }
  

• 覆盖a标签伪类的默认样式
  若需要处理链接的不同状态（未访问、已访问），可以明确指定伪类的颜色：

  .navbar .nav-links a:link,
  .navbar .nav-links a:visited {
    color: #fff;
  }
  /* 可选：添加鼠标悬停等状态的颜色 */
  .navbar .nav-links a:hover {
    color: #ddd;
  }
  

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