Chrome 中具有焦点轮廓的元素的 CSS 选择器答案

【问题标题】：CSS selector for elements having focus outline in ChromeChrome 中具有焦点轮廓的元素的 CSS 选择器
【发布时间】：2018-05-16 12:02:39
【问题描述】：

如果您在 Chrome 中按 TAB 导航页面，则通过添加大纲来表示关注元素。问题是轮廓是在外面绘制的，所以我需要将 z-index 应用到这样的轮廓元素上，这样轮廓就不会被具有较高 z-index 的元素隐藏em> 比焦点元素的。

我尝试了:focus 选择器，但似乎一个元素可以在 Chrome 中聚焦但没有轮廓（例如，如果你用鼠标单击它）。那么，将样式应用于所有轮廓且仅轮廓元素的有效选择器是什么？

编辑：我所说的没有轮廓的焦点就像下面的例子一样：

<style> a:focus{color:red} </style>
<a href="#">abc</a><br>
<a href="#">def</a>

当您在此类链接上按 TAB 键时，它们会根据 :focus 规则设置样式并进行轮廓化，但是当您用鼠标单击它们时，会应用样式但浏览器不会对元素进行轮廓化。

【问题讨论】：

没有轮廓的重点是什么意思？如果我创建一个简单的文本输入并用鼠标选择它，它也会被聚焦吗？ :focus 应该是正确的标签
data:text/html, abc
def 当您选择此类链接时，它们都会被勾勒出来并具有焦点样式。当您单击它们时，它们没有轮廓，但有焦点样式。
对！好点子！ a 元素在点击时没有得到轮廓。有了TAB，他们就可以了。有一天，我读到了一个 :focus-ring 选择器，但我认为 W3C 并没有对此做任何事情。

标签： css google-chrome focus

【解决方案1】：

对于 Firefox，您可以阅读 :-moz-focusring 选择器。

【讨论】：

【解决方案2】：

为大纲样式添加自定义 css。

a{border:1px solid #fff;}
a:focus{color:red;
outline:none; 
border:1px solid #4D90FE;
-webkit-box-shadow: 0px 0px 5px  #4D90FE;
box-shadow: 0px 0px 5px  #4D90FE;}

<a href="#">abc</a><br>
<a href="#">def</a>

【讨论】：

这不是他的问题的答案。他想要的是所有当前概述的元素的选择器。