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伪类颜色设置为绿色，所以如果您访问过该链接（在测试时？），即使您已修复了CSS，它仍将显示为绿色在未访问的链接上显示＃222颜色。

解决方案：

将a:link和a:visited更改为＃222
将4个状态中的每个状态更改为不同的颜色，同时计算出来，这样您就可以看到哪个伪类实际影响a元素。然后，如果您仍然无法解决问题，请使用您需要的实际结果的更详细说明来更新您的问题。

编辑：原始问题未指定OP正在使用bootstrap。这个解决方案可以使用干净的CSS，但是没有摆脱默认情况下使用bootstrap发生的蓝色“访问”状态。

css悬停，活动效果不正常

2 个答案: