如何在父项焦点上设置子项的默认浏览器样式大纲

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

如何在孩子上设置默认的bowser风格轮廓？我有Chrome，FF和IE9 +

我有兴趣为大纲带来默认浏览器样式。

Answer 1

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

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

修改

主动测试

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