css - 无法通过从父 <footer> 继承来覆盖 链接的蓝色

Question

我正在尝试使用 .footer 选择器上的声明覆盖我网页页 footer 分中链接的蓝色，以匹配链接所在页脚的颜色，但它不起作用。

.footer {
  color: #666;
  background-color: #ccc;
  padding: 15px 0;
  text-align: center;
  font-size: 14px;
}

<footer class="footer">
            &copy; 2016 Wombat Coffee Roasters &mdash; <a href="/terms-of-use">Terms of use</a>
   </footer>

该链接仍然显示为蓝色，如下图所示:
Final Display

Answer 1

CSS cascade根据重要性(正常或重要)和来源(作者、用户或用户代理)排序。按优先级升序排列:

用户代理声明

用户普通声明

作者正常声明

作者重要声明

用户重要声明

Thank you. But why does the style from the browser have a higher specificity than something that the author wrote, in this case the .footer selector? Isn't the specificity of author style > user agent style?

您可以使用更具体的选择器来声明 color嵌套在 <footer> 中的链接的属性或全部给 <a>标签 color: inherit所以它们继承了它们父容器的字体颜色。然后链接颜色将按您的预期更改，因为它们会覆盖用户代理声明。目前，浏览器提供的用户代理样式表保持链接的默认值 -webkit-link由于优先级为蓝色。

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

在你的 CSS 声明中使用一个选择器，它更特定于页脚中的目标永久链接，如 .footer a { color: #666 }或全部给 <a>标签 color: inherit .看看 Specificity更多。

.footer {
  color: #666;
  background-color: #ccc;
  padding: 15px 0;
  text-align: center;
  font-size: 14px;
}

.footer a {
  color: #666;
}

/* OR */

a {
  color: inherit; /* inherit color from parent */
}

<footer class="footer">
            &copy; 2016 Wombat Coffee Roasters &mdash; <a href="/terms-of-use">Terms of use</a>
   </footer>