CSS選擇器，div輸入：選中

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

的〜組合子分隔兩個選擇器和僅當它被第一先於第二 元素相匹配，並且兩個共享一個公共父母。

你有你的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