更改导航元素内锚元素的文本颜色[重复]答案

【问题标题】：changing text color of an anchor element inside a nav element [duplicate]更改导航元素内锚元素的文本颜色[重复]
【发布时间】：2022-08-15 15:19:35
【问题描述】：

  <nav>
    <a href=\"#\">HOME</a>
    <a href=\"#\">SPEAKERS</a>
    <a href=\"#\">SCHEDULE</a>
    <a href=\"#\">VENUE</a>
    <a href=\"#\">REGISTER</a>
  </nav>

当我在 CSS 中定位 \'nav\' 元素时，我可以更改 \'a\' 元素内容的字体大小/字体粗细/字母间距等属性。但是，我无法更改文本颜色。为了做到这一点，我必须定位到\'nav a\'。

为什么只指定 \'nav\' 而不能指定其他一些印刷属性？

标签： html css

【解决方案1】：

因为有一个默认的字体颜色，所以它不会继承父元素的字体颜色。

【讨论】：

【解决方案2】：

href's 或超链接有 custom browser styles 包括文本颜色。因此，这就是为什么您必须指定特定颜色来覆盖默认值的原因。

nav a {
  text-decoration: none;
  color: inherit;
}

<nav>
  <a href="#">HOME</a>
  <a href="#">SPEAKERS</a>
  <a href="#">SCHEDULE</a>
  <a href="#">VENUE</a>
  <a href="#">REGISTER</a>
</nav>

【讨论】：

【解决方案3】：

child tag does not inherit the style of a parent，当它有自己的风格时。

a 标签有一个默认样式：

a: -webkit-any-link {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
}

因此，您应该使用更具体的选择器

【讨论】：