html - 有什么办法可以用CSS更改外部div中的div元素

Question

我有这个列表

<nav>
  <ul>
    <li>list el</li>
    <li>list el</li>
    <li>list el
       <ul>
          <li>inside</li>
          <li>inside2</li>
       </ul>
    </li>
  </ul>
</nav>
<section>
  <img src="#">
  <h1>Some Title</h1>
</section

我使用 :focus 在点击时显示下拉列表，而不使用 JS。目前一切正常。但我想在下拉列表处于事件状态时更改整个部分的颜色(通过:focus)。有什么办法可以完全用 css 做到这一点吗？我正在尝试使用尽可能少的 JS(绝对没有 jQuery)

Answer 1

是的，您可以无需一点 JS，使用 Radio Hack。基本上，使用标签作为您的“重点”元素。这个标签应该有它的 for 属性引用一个 input type="radio" ，它在你想要影响的元素之上分层。然后只需使用以下 css 选择器 #myradio:checked ~ #mysection{ }。

此处有更多详细信息:https://stackoverflow.com/a/21939282/2306481