CSS变化：检查伪类

Question

下面的代码可以让我改变任何同级div元素的CSS时复选框被选中： -

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

我需要做什么当列表中的特定单选按钮被选中时，通过它的Id或它的类来定位特定的div。

我想试试这个纯粹的CSS。

伊夫试图这样做： -

input[type="radio"]:checked ~ #one.div{ 
display:none; 
} 

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

<div class="container"> 


    <input type="radio" id="opt1" name="radiolist" checked> 
    <label for='opt1'>New Account</label> 


    <input type="radio" id="opt2" name="radiolist"> 
    <label for='opt2'>Existing Account</label> 

    <div id="one">Lorem Ipsum 1</div> 
    <div id="two">Lorem Ipsum 2</div> 

</div> 

html, body{ 
    height :100%; 
} 

.container{ 

    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{ 
display:none; 
} 

Answer 1

我更新的CSS当选择一定的单选按钮，以显示相应的div。问题是你的选择器的div：#one.div。这针对id为“one”和class“div”的元素。应该是div#one。

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    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"]~div { 
 
    display: none; 
 
} 
 

 
input[type="radio"][id="opt1"]:checked~div#one, 
 
input[type="radio"][id="opt2"]:checked~div#two { 
 
    display: block; 
 
}

<div class="container"> 
 

 

 
    <input type="radio" id="opt1" name="radiolist" checked> 
 
    <label for='opt1'>New Account</label> 
 

 

 
    <input type="radio" id="opt2" name="radiolist"> 
 
    <label for='opt2'>Existing Account</label> 
 

 
    <div id="one">Lorem Ipsum 1</div> 
 
    <div id="two">Lorem Ipsum 2</div> 
 

 
</div>