锚标签焦点状态与浏览器默认轮廓不一致答案

【问题标题】：Anchor tag focus state inconsistent with browser default outline锚标签焦点状态与浏览器默认轮廓不一致
【发布时间】：2016-03-01 21:45:51
【问题描述】：

所以我遇到了一个问题，我试图用新样式替换焦点状态的大纲选项。不幸的是，css :focus 属性似乎与大纲的作用不同。

<a href="#">Test 1, no focus class</a>
<br/><br/>
<a href="#" class="focus">Test 2, with focus class</a>

如果您单击第一个链接并按住不放，您会看到该链接变为浏览器的默认颜色（我的是红色），但当您执行相同操作时，第二个链接变为橙色（来自当前的 css 文件） .如果您在两个链接之间切换，则第一个链接上会出现轮廓并且颜色不会改变，但会在第二个链接上改变。

如何在没有 javascript 的情况下设置它的样式，以便它们的行为相同，但仅在 tabing 时，颜色变为橙色？

它应该是这样工作的

【问题讨论】：

点击时是否需要改变a元素文本的颜色？
不，点击不应该改变颜色。只有标签才能改变颜色。这就是我卡住的地方。它是如此简单，但感觉我错过了一些东西
图像影响看起来与设置为jsfiddle.net/mfeola/my8ngbow/8 的实际css 不同？是否要求 a) 在 tab 上更改第二个元素的轮廓，或 b) 在 tab 上更改第二个元素的文本？用文字描述需求并在问题中引用每个元素的预期结果可能会帮助用户尝试解决问题。不完全清楚，这里，每个元素的预期结果是什么？
我删除了第二个链接，因为增加了混乱。它的存在是为了让问题更加明显，但我认为 GIF 做得更好。我一直试图解释这个问题，但它并不复杂，因为它确实不是，但它被证明是困难的。
使用tab键选择第二个元素文本颜色是否要求设置为橙色？

标签： css focus

【解决方案1】：

使用:active

body {
  font-family: Arial;
}
a:active {
  color: orange;
}

<a href="#">Test 1, no focus class</a>
<br/>
<br/>
<a href="#" class="focus">Test 2, with focus class</a>

【讨论】：

不，抱歉。我认为你做了相反的事情。这是一个奇怪的问题，但基本上我希望看到颜色仅在浏览链接时发生变化，而不是在单击时发生变化。我添加了一个 gif 来帮助说明我需要什么。希望对你有帮助
@MichaelF “但基本上我希望看到颜色仅在通过链接切换时发生变化” 使用:focus 似乎在jsfiddle.net/my8ngbow/3 将文本呈现为橙色时tab 被按下。 .focus class 的目的是什么？
您是否尝试更改与a 元素相邻的实际蓝色轮廓的颜色 :focus ？，而不是文字？
我发布了另一个示例和另一个 gif，可能有助于更好地解释我的观点
@MichaelF 在tab 的第一个元素的文本颜色不应该改变？在tab 到第二个元素，文本的颜色应该改变？

【解决方案2】：

像这样？ :)

.focus:focus {
    color:orange
}

编辑：现在应该按预期工作:)

【讨论】：