当父母处于焦点时如何在孩子上设置默认浏览器样式大纲

Question

当父母处于焦点时，我想在孩子而不是父母身上显示轮廓。我有这个code。

a {    
   display:inline-block;
   width:300px;
   height:300px;
   outline: 0;
}

a:focus > .b {
   outline: 1; /* can be initial, does not work */
}

如果样式是，轮廓会显示在孩子身上，

a:focus > .b {
   outline: red solid 3px;; 
}

如何在孩子身上设置默认的鲍泽风格轮廓？我有 Chrome、FF 和 IE9+

我有兴趣为大纲引入默认浏览器样式。

Answer 1

您不能在没有轮廓的元素中显示轮廓。那是一个边界。您删除 <a> 标记中的轮廓，这很好，然后为 .b 元素添加边框：

 a:focus > .b { border: 1px solid red; }

编辑

主动测试

 a > .b:active {
     outline: 1px solid red; 
 }