Question

当以下代码中的子元素span.icon-hamburger收到：焦点状态时，我想要更改li元素的样式。使用SASS解决方案，我读到@ at-root可以在这里工作。但是，我无法使用@ at-root为这个用例找到SASS解决方案。您对此用例有何看法？

HTML：

<ol>
  <li>
    <span class="icon-hamburger"></span>
  </li>
</ol>

CSS / SASS：

.icon-hamburger:focus {
  @at-root ol li #{&} {
    background-color: #fff;
  }
}

Answer 1

目前无法在CSS中选择元素的父级。

如果有办法，那么它将出现在当前的CSS选择器规范中：

Selectors Level 3 Spec

CSS 2.1 Selectors Spec

与此同时，如果您需要选择父元素，则必须使用JavaScript。

N.B。，有人讨论过在CSS4中这样做的可能性。

Answer 2

IE和Edge没有解决方案，但对于Chrome和Firefox，您可以使用：focus-within CSS伪类。

：CSS伪类中的焦点表示具有的元素收到焦点或包含已获得焦点的元素。在换句话说，它代表了一个本身与之匹配的元素：focus伪类或具有匹配的后代：focus。（这包括阴影树中的后代。）