专注于父母dom，但给孩子dom概述

Question

我有一个html strucute，看起来像这样

<div class = "f">
   <a href="" class ="d" > 
      <span class ="b"> hello </span> 
   </a>
</div>

activeElement始终是'a'但是我想在'a'处于活动状态时给出大纲。 （通过激活我的意思是当我们通过选项卡导航并且'a'成为activeElement时） 我尝试过像

这样的事情

.a:active {
  &.b:focus{
   outline : 1px solid white:
 }
}

Answer 1

这应该是您想要的，当a处于有效状态时b会得到一个大纲：

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

此外，您的outline值的顺序错误，因此我对其进行了更改。

Answer 2

这对我jsfiddle很好。

<a href="" class ="d" > 
 <span class ="b"> hello </span> 
</a>

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