logo标签列表

无法更改链接颜色

css
4
这是问题的截图： enter image description here 请注意，我们正在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;
  }

之前，我使用CSS来创建#nav .active的边框以在活动页面周围创建边框。这起作用了，当我在/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就会生效，但现在我想保持已访问链接为黑色而不是蓝色。
这段代码似乎没有任何问题：http://jsfiddle.net/hFnHZ/ stalk 超链接会改变颜色... 我正在使用 Chrome 11.0.696.68。 - Richard JP Le Guen
6个回答
6
使用
#nav a.active {
    color:#93AFBF;
  }

#nav a:visited 具有比 #nav .active 更高的特殊性w3规范，因此被应用。

“#nav a:visited”比“#nav .active”具有更高的特异性吗？第一个是“0,1,0,2”，第二个是“0,1,1,0”，对吗？ - Richard JP Le Guen
@Jawad 它是 .active （这是一个名为 "active" 的类），而不是 :active（一个伪类）。 这是一个缺乏灵感的类名，但解决方案是正确的。 - sica07
@Gaby aka G. Petrioli - 啊，是的；我混淆了伪类和伪元素。 - Richard JP Le Guen
@sica07 有没有更有创意的方法来突出显示活动控制器？ - boo-urns
@Rachel 我没有想到其他的方法，我对此没问题。实际上，我不确定我是否理解了你的问题。如果这与我的答案有关“类的无灵感名称”，那么我认为你误解了我。我只是说您可以使用其他名称来表示活动控制器（链接）类；任何名称都可以，但不要用“active”，因为还有活动伪类，并且在CSS中，活动链接并不是大多数人所想的，参见Jawad的回答以及Site Point关于此主题的参考信息。 - sica07
显示剩余2条评论
3

尝试

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

那应该就可以了。
0

尝试：

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

你混淆了活动伪类

Site Point Refrence

这个伪类匹配任何正在被激活的元素。例如，在单击链接时，从按下鼠标按钮到释放鼠标按钮的过程中，它将应用。该伪类并不表示指向活动或当前页面的链接 - 这是CSS初学者常见的误解。

类似问题

2
他没有混淆任何东西..看看他的标记..他手动添加了active类到他想要的链接.. - Gabriele Petrioli
@Jawad - 这个问题中的:active伪类在哪里？到目前为止，它只出现在答案中。 - Richard JP Le Guen
那么我的回答（现在已被投票否决）一直正确吗？ - Steve Day
伙计！我没有投票反对你的答案。如果其他人因为我的评论而投票反对你的答案，我很抱歉。我猜他们和我一样愚蠢！ - Jawad
谢谢Gaby。下次会小心的。我应该被投反对票。甚至应该被投100个反对票。 - Jawad
显示剩余2条评论
0

边框属性不会被继承，而颜色属性会被继承。因此，您可以从＃nav继承链接的颜色属性，而边框属性是在“active”类规则中声明的。建议您按照Gaby的建议为具有“active”类的链接声明颜色属性。

0
今晚我发现了一个不寻常的问题。（一种我无法更改的链接颜色。）我进入检查器，首先找到了设置了text-decoration-color属性。但是，那太简单了。我向下滚动到color并找到这个:not选择器，这是一个主题作者创建的。在我的特定情况下，解决方案是使用我想要的颜色重复（覆盖）这个奇怪的选择器：

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

我的建议是进入检查器（F12），找到“计算”选项卡，并查看颜色来自哪里。通常很容易确定颜色来自哪里，检查器甚至会告诉您设置颜色的文件和行号。然后需要决定的是，您是否有访问/权限访问该文件？或者您可能有访问权限，但是否真的想要访问该文件？

如果您想避免更改颜色源代码，无论出于什么原因，您可以在页面下方重新声明颜色，例如在页脚或主题加载后立即进行。当然，如果有选择的话，通常最好找到问题的根源，这样您就可以使用更少的CSS代码，加载更快，更易于维护。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接