单击后链接颜色保持蓝色，直到单击视口上的其他位置答案

【问题标题】：Link color stays blue after clicking until somewhere else on viewport is clicked单击后链接颜色保持蓝色，直到单击视口上的其他位置
【发布时间】：2016-04-04 02:49:30
【问题描述】：

在我的 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>

【问题讨论】：

哦，我知道你遇到了什么问题。删除了我的答案，因为它是不充分的。编辑：发布新答案

标签： html css twitter-bootstrap navbar

【解决方案1】：

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

那么，解决问题：

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

【讨论】：

太棒了！我不知道 a:focus 是一回事。在我浏览的任何网站上都没有找到它。下次我会检查内置的开发人员工具来调试我的 CSS！

【解决方案2】：

蓝色边框来自 a:focus，它在 bootstrap.css 中的第 1104 行附近定义：

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

覆盖 CSS 中导航的 a:focus 属性应该可以解决您的问题。

color: whatever you want;
outline: none;

【讨论】：