帶有複選框的純CSS元素div元素更改樣式

Question

我想通過使用兄弟複選框的選中狀態來切換兄弟元素的CSS。

是否有可能從複選框中檢查僞類中的頁面任何位置的元素？

我試圖避免使用任何JavaScript。

https://codepen.io/dyk3r5/pen/WOmxpV?editors=1111

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
label { 
 
    color: #000; 
 
    font-weight: 600; 
 
    height: 25px; 
 
    padding: 5px 10px; 
 
    border-bottom: 2px solid lightgrey; 
 
    margin: 5px 1px; 
 
} 
 

 
input[type="radio"] { 
 
    display: none; 
 
} 
 

 
input[type="radio"]:checked + label { 
 
    border-bottom: 2px solid red; 
 
} 
 

 
input[type="radio"]:checked > div p { 
 
    display: none; 
 
}

<div class="container"> 
 
    <div id="new-account"> 
 
    <input type="radio" id="opt1" name="radiolist" checked> 
 
    <label for='opt1'>New Account</label> 
 
    <div class="content"> 
 
     <p>Lorem Ipsum</p> 
 
    </div> 
 
    </div> 
 

 
    <div id="existing-account"> 
 
    <input type="radio" id="opt2" name="radiolist"> 
 
    <label for='opt2'>Existing Account</label> 
 
    <div class="content"> 
 
     <p>Lorem Ipsum 2</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

你的錯誤是在這一行：

input[type="radio"]:checked > div p 

你的div元素不是input元素的「直接子女」。你需要的是「一般兄弟選擇器」，以解決任何以下div兄弟姐妹。

所以它應該是：

input[type="radio"]:checked ~ div p 

Answer 2

使用CSS像

input[type="radio"]:checked + label + .content p { 
    display: none; 
}