点击链接后，链接颜色保持为蓝色直到在视口的其他地方点击。

Question

在我的CSS中，我尝试使用:link、:visited、:hover和:active选择器将导航栏a元素的字体颜色设置为黑色，但没有任何变化。我认为我的标题已经清楚地表达了我的问题，但这是我的网站链接，我正在努力修复它：http://students.washington.edu/jgb93/info343/portfolio/#/。

基本上，如果你尝试点击导航栏中的一个链接，它会暂时变成蓝色。如果在视口的任何其他位置单击，蓝色会变回我想要的黑色。有什么建议是什么原因造成的？

这是我在HTML中为导航栏做的全部内容，其余部分都在CSS中完成：

            <div id="navbar" class="navbar navbar-default navbar-fixed-top">
            <nav>
                <ul id="navlist">
                    <li class="navitem"><a class="link" ui-sref="home">Home</a></li>
                    <li class="navitem"><a class="link" ui-sref="about">About</a></li>
                    <li class="navitem"><a class="link" ui-sref="contact">Contact</a></li>
                </ul>
            </nav>
        </div>

- user5588594

---

哦，我明白你遇到了什么问题。由于我的回答不够充分，已将其删除。编辑：发布新的回答。 - user2490157

Answer 1

存在CSS冲突。要调试CSS，您可以尝试使用浏览器内置的开发人员工具，按F12键或在Mozilla Firefox中使用Firebug。

因此，为了解决问题：

.navitem a:focus{color:#000;}

- Rusty

---

太棒了！我不知道a:focus是个东西。在我查看的任何网站上都没有找到它。下次我会检查内置的开发者工具来调试我的CSS！ - user5588594

Answer 2

蓝色边框是由于在bootstrap.css文件的1104行左右定义了a:focus造成的：

a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

在你的 CSS 中覆盖 a:focus 属性应该可以解决你的问题。

color: whatever you want;
outline: none;

- zisoft