Question

当选中复选框时，下面的代码将允许我更改任何兄弟div元素的css： -

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

我需要做的是在检查列表中的特定单选按钮时，通过其Id或其类来定位特定div。

我想尝试使用CSS中的Purely。

我试过这样做： -

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>

使用以下方法检查特定单选按钮时CSS更改：checked伪类

1 个答案: