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

Question

当 parent 处于焦点时，我想在 child 而不是 parent 身上显示轮廓。我有这个 code .

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

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

轮廓显示在 child 身上，如果样式是，

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