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 btw）

注意：如果您无法找到这些代码块之间的差异，则区别在于此代码的位置

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

任何帮助都会很棒，谢谢

Answer 1

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

解决方案：将表格从div中删除，或者调整CSS。

.hide:checked ~ div > #list

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

1 个答案: