Question

我想知道是否有一种方法，如果您专注于父元素，是否可以在不使用javascript的情况下更改子元素的样式，所以说我有

<li class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</li>

，如果您专注于父元素，我希望能够更改两个子元素的样式。所以我试图做到这一点。

.parent{
   &:focus{
      & .child1{
         background: green;
      }
      & .child2{
         background: green;
      }
   }
}

但是这似乎不起作用，现在我知道我可以使用javascript来做到这一点，但是我只是想知道是否有一种纯粹的CSS方式来做到这一点？

任何帮助将不胜感激！

Answer 1

是可以的，但是您需要弄清和理解术语“关注元素”。

如果您的意思是鼠标悬停（也就是悬停），则可以使用&:hover将您的SASS更新为：

.parent{
   &:hover{
      & .child1{
         background: green;
      }
      & .child2{
         background: green;
      }
   }
}

但是，如果您的意思是实际的焦点事件，那么您需要知道默认情况下哪些元素可以通过单击或键盘交互来获得焦点。

li默认不是“可聚焦的”，但是您可以通过向其添加tabindex="0"来更改此设置：

<li class="parent" tabindex="0">
    <div class="child1"></div>
    <div class="child2"></div>
</li>

tabindex应该尽可能少地使用，因为它可能会带来更大的可访问性。