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

我正在使用：专注于在点击时显示下拉列表，而不使用JS。现在一切都还可以。但是我想在下拉列表处于活动状态时改变整个部分的颜色（通过：焦点）。有什么方法可以完全用css做到这一点吗？我试图使用尽可能少的JS（绝对没有jQuery）

Answer 1

是的，你可以使用Radio Hack，没有丝毫的JS 。基本上，使用标签作为您的重点＆＃34;元件。此标签应使其for属性引用input type="radio"，该#myradio:checked ~ #mysection{ }层次结构位于您希望受影响的元素之上。然后只需使用以下css选择器{{1}}。

此处有更多详情：https://stackoverflow.com/a/21939282/2306481

Answer 2

如果您愿意使用:focus更改为使用:target，那么您可以。

从您的问题中不清楚如何实现您的下拉行为，但这是一个简单的示例，应该说明如何处理它。 （只有第三个项目有下拉列表，但所有三个链接都应该更改背景颜色）。

:target的行为与:focus略有不同，所以您需要注意的事项是：

目标将更改网址，创建历史记录点。
目标将保留＆＃34;焦点＆＃34;即使用户点击其他元素，目标丢失的唯一时间是目标另一个目标。

＆＃13;

li ul {display: none;}

#dd1:target { background: gold; }
#dd2:target { background: green; }
#dd3:target { background: red; }

#dd3:target .dd3 {display: block;}

＆＃13;

<div id="dd1">
<div id="dd2">
<div id="dd3">
  <nav>
    <ul>
      <li><a href="#dd1">list el</a></li>
      <li><a href="#dd2">list el</a></li>
      <li><a href="#dd3">list el</a>
        <ul class="dd3">
          <li>inside</li>
          <li>inside2</li>
        </ul>
      </li>
    </ul>
  </nav>
</div>
</div>
</div>

＆＃13;

有什么办法可以用css改变外部div中的div元素

2 个答案: