css悬停，主动效果无法正常工作

Question

我不明白为什么 "a" 元素的默认颜色设置为 #2bb673，而它必须是 #222。我做错了什么？我也在使用 bootstrap

    <div class="our-work">
        <a href="#our-work" class="our-work">Our Work</a>
     </div>

CSS

 .our-work a {
      color:#222;
    }

.our-work a:link {text-decoration: none; color: #2bb673;}
.our-work a:visited {text-decoration: none; color: #2bb673 ;}
.our-work a:hover {text-decoration: none; color: #2bb673;}
.our-work a:active {text-decoration: none; color: #2bb673;}

Jsfiddle

Answer 1

.our-work a {} 适用于所有州，然后您可以这样指定每个州：

.our-work a:link {text-decoration: none; color: #2bb673;}

a:link 覆盖您之前指定的默认状态。

所以只需删除 a:link 样式，或将其更改为 #222，作为默认样式。

Answer 2

根据您的问题，这将解决问题：

.our-work a:link {text-decoration: none; color: #222;}
.our-work a:visited {text-decoration: none; color: #2bb673 ;}
.our-work a:hover {text-decoration: none; color: #2bb673;}
.our-work a:active {text-decoration: none; color: #2bb673;}

a:link 将覆盖 a，因此您需要将 #222 颜色放在那里。

但是，请记住您已将 a:visited 伪 class 颜色设置为绿色，因此如果您访问了 link（在测试时？），它仍会显示即使您已修复 css 以在未访问的 link.

上显示 #222 颜色，也显示为绿色

解决方案：

将 a:link 和 a:visited 都更改为 #222
将 4 种状态中的每一种状态更改为不同的颜色，同时弄清楚这一点，以便您可以看到哪个伪 class 实际上影响了 a 元素。然后，如果您仍然无法弄清楚，请使用您需要的实际结果的更详细描述来更新您的问题。

编辑：原始问题没有指定 OP 正在使用 bootstrap。此解决方案将适用于干净的 CSS，但不会摆脱默认情况下 bootstrap.

出现的蓝色 "visited" 状态

css悬停，主动效果无法正常工作

css hover,active effect not working properly

css

computer-science

twitter-bootstrap