css伪类在不同的标签中停止工作

Question

我被这个词绊住了，我什至不知道要搜索哪些词...（至少我尝试过的词没有找到任何接近我正在寻找的词）

我正在尝试做的是使用 CSS 使用复选框展开/折叠列表（没有 javascript，经理的请求）。我遇到的问题是，它仅在与列表位于同一标签下时才有效。下面的例子

这行得通：

--head--
<style type="text/css">
  .hide:checked ~ #list
  {
    visibility: collapse;
   }
</style>

--body--
  <div>
    <input type="checkbox" class="hide" checked="checked"> Hide
    <table id="list">
      <tr>
       <td>test</td>
      </tr>
      <tr>
       <td>
        <ol >
           <li>item 1</li>
           <li>item 2</li>
           <li>item 3</li>
        </ol>
       </td>
      </tr>
    </table>
  </div>

但这不是

--head--
<style type="text/css">
  .hide:checked ~ #list
  {
    visibility: collapse;
   }
</style>

--body--
  <input type="checkbox" class="hide" checked="checked"> Hide
  <div>
    <table id="list">
      <tr>
       <td>test</td>
      </tr>
      <tr>
       <td>
        <ol >
           <li>item 1</li>
           <li>item 2</li>
           <li>item 3</li>
        </ol>
       </td>
      </tr>
    </table>
  </div>

我不知道为什么（顺便说一句，我在 CSS 方面的训练并不那么好）

注意：如果您找不到这些代码块之间的不同之处，则区别在于该代码的位置

<input type="checkbox" class="hide" checked="checked"> Hide

任何帮助都会很棒，谢谢

Answer 1

CSS 中的~ 运算符表示“跟随”。但是，复选框后面没有表格，只有一个 div。当然，表格就在那里，但它在 DOM 树的更深处。

解决方法：要么把表格从div中取出，要么调整CSS。

.hide:checked ~ div > #list