似乎无法改变链接的颜色

Question

以下是问题的屏幕截图：

请注意，我们位于stalk页面上。我写的CSS应该改变活动页面的颜色。这是CSS：

#nav {
    border-top:10px solid #A7C1D1;
    height:45px;
    padding-left:100px;
    padding-top:20px;
    margin-left:0;
    color:#000;
}

  #nav a {
    color:#000;
    text-decoration:none;
  }

  #nav a:visited {
    color:#000;
  }

  #nav a:hover {
    color:#93AFBF;
  }

  #nav .active {
    color:#93AFBF;
  }

之前，我使用#nav .active的CSS在活动页面周围创建边框。这很有效，当我在/ stalk页面上时，我可以看到“stalk”这个词的边界。但这一次，我决定改变这个词的颜色。这是我遇到问题的地方。

以下是为页面呈现的HTML：

  <div id="nav"> 
    <a href="/">home</a> &middot; <a href="/stalk" class="active">stalk</a> &middot; <a href="#">link3</a> &middot; <a href="#">link4</a> 
  </div>

如果我删除了#nav a:visited的CSS，那么#nav .active的CSS就可以了，但是当我希望它们保持黑色时，访问过的链接是蓝色的。

Answer 1

使用

#nav a.active {
    color:#93AFBF;
  }

#nav a:visited的{​​{3}}高于#nav .active，因此会被应用。

Answer 2

尝试

#nav a.active
{
   color: #93afbf
}

应该这样做。

Answer 3

尝试：

#nav a:link {color: #000;}
#nav a:visited {color: #000;}
#nav a:hover {color: #93afbf;}
#nav a:active {color: #93afbf;}

Answer 4

您正在混淆活动的伪类

Site Point Refrence

  

此伪类匹配正在激活的任何元素。例如，它适用于鼠标单击链接的持续时间，从鼠标按钮被按下的点到再次释放它的点。伪类并不表示指向活动页面或当前页面的链接 - 这是CSS初学者中常见的误解。

Similar Problem

Answer 5

当属性为color属性时，不会继承Border属性。因此，您从#nav继承链接的color属性，而border属性是在“active”类规则中声明的属性。您应该按照Gaby

的建议为“活动”类声明链接的颜色属性

Answer 6

今晚我发现了一个不寻常的。 （我无法改变的链接颜色。）我进入了检查员并首先找到了text-decoration-color属性集。但不，那太容易了。我向下滚动到color并找到主题作者创建的:not选择器。在我的具体情况下，解决方案是用我想要的颜色复制（覆盖）这个奇怪的选择器：

#the-post .entry-content a:not(.shortc-button) { color: white !important; }

我的建议是进入你的检查员（F12）并找到＆＃34; Computed＆＃34;选项卡并查看颜色来自哪里。通常它是直接来自颜色的地方，检查员甚至会告诉你哪个文件和哪个行号设置颜色。那么决定是，你有权访问/获得该文件吗？或者您可以访问，但是您是否一定要访问该文件？

如果您想避免更改颜色来源，无论出于何种原因，您可以在页面下方再次重新声明颜色，例如在页脚中，或者在加载主题后立即重新声明颜色，无论情况如何是。当然，考虑到选项，通常最好找到问题的根源，然后最终使用较少的CSS代码，这些代码加载速度更快，更易于维护。