html - CSS 选择器，div 输入 :checked

Question

我该如何修复它，我需要在带有 div 的复选框中使用(两个部分都没有 div 它可以工作)，我只能使用纯 CSS。

HTML:

<div><input type="checkbox"></div>
<ul>
    <li>PSD WEBSITES</li>
    <li>UI KITS</li>
    <li>PREMIUM PSD</li>
    <li>ABOUT</li>
    <li>BLOG</li>
</ul>

CSS:

div input:checked ~ ul {
    display: none;
}

Answer 1

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

您必须将 html 结构更改为:

div input:checked ~ ul {
  display: none;
}

<div>
  <input type="checkbox" />
  <ul>
    <li>PSD WEBSITES</li>
    <li>UI KITS</li>
    <li>PREMIUM PSD</li>
    <li>ABOUT</li>
    <li>BLOG</li>
  </ul>
</div>

引用

General sibling selectors