带有复选框的纯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; 
}