使用 :checked pseudo class 检查特定单选按钮时 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”且类为“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>