无法设置锚标签的样式？有人解释为什么？

Question

  

从这里开始： scroll to bottom footer

我无法在页脚锚点上创建悬停效果。我完成此任务的唯一方法是内联：

<a style="color:#6bc2ef;" ... >Company</a>

我觉得很蠢......任何人都知道为什么我无法编辑这些页脚锚的风格？ 我只想添加一个类，以便我可以进行悬停效果

页脚链接示例：

<a class="footA" href="http://www.designobvio.us/smartklubben/company">Company</a>

CSS示例：

.footA:hover {
  color:#6bc2ef;
}

感觉好像有些东西阻止我编辑CSS。要不然，或者我不知道如何正确地筑巢......

CSS示例

  

http://designobvio.us/smartklubben/wp-content/themes/SchoolManagementClub/css/style.css

Answer 1

你有这个规则：

#footer p a {
    color: #FFFFFF;
}

比您尝试应用的规则更具体。

请在此处阅读：http://www.standardista.com/css3/css-specificity/

你可以这样做：

#footer a {
    color: #fff;
}

#footer a.footA {
    color: #6bc2ef;
}

现在，您的规则更具体（因为它包含一个额外的类选择器）。

Answer 2

#footer p a的规则具有比.footA:hover更高的CSS特异性，因此忽略了它。您可以使用#footer .footA:hover之类的选择器来提高特异性。

您可以阅读有关CSS特异性如何工作以及如何计算将应用哪个规则的更多信息here。

Answer 3

这就是你现在所拥有的：

a:hover .footA {
    color: #06e;
}

你在帖子中的内容会很好 - 因为你没有使用它，所以它不起作用。

a.footA:hover {
    color: #06e;
}

此外，您还可以使用此行覆盖该悬停代码：

#footer p a {color:#fff;}

这会永久设置任何状态下任何a元素的颜色（悬停，焦点等）。