用于在Chrome中具有焦点轮廓的元素的CSS选择器

Question

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

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

编辑：我的意思是没有轮廓的焦点如下例所示：

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

当你对这些链接进行TAB时，它们都由：focus规则设置并概述，但是当你用鼠标点击它们时，应用了样式但浏览器没有勾勒出元素。

Answer 1

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

Answer 2

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

＆＃13;

＆＃13;

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;} 

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;