当下面代码中的子元素 span.icon-hamburger 收到 :focus 状态时，我想更改 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;
}
}
最佳答案
没有针对 IE 和 Edge 的解决方案，但对于 Chrome 和 Firefox，您可以使用 :focus-within CSS 伪类。
The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
关于css - 子元素焦点状态更改父元素样式 SASS @at-root，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40183570/