Question

我正在尝试使用input：选中ID以在另一部分中显示文本？基本上，当选中＃tab1时，＃content1的显示应从无更改为块。感谢您的帮助

我尝试过

 #tab1:checked ~ #content1{
   display: block;
 }

这是代码：

<section class="tab--blue">
   <div>
     <input id="tab1" type="radio" name="tabs">
     <label for="tab1">Label Text</label>
   </div>
</section>

<section class="tab--grey">
   <div id="content1">
      <h4>Text to display </h4>
   </div>
</section>

Answer 1

兄弟姐妹运算符不起作用，因为输入和h4不是兄弟姐妹。部分是这里的唯一兄弟姐妹。

尝试这个：

.input ~ .label{
  display: none;
}

.input:checked ~ .label{
  display: block;
}

.input:checked ~ p{
  color: blue;
}

<input type="checkbox" class="input">
<label class="label"> Label </label>
<p> Random Text </p>

是否有Sass方法可以使用input：checked定位到同级区域？

1 个答案: