css - 是否有使用输入的 Sass 方法：检查到目标兄弟部分？

Question

我正在尝试使用 input:checked on an 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

Siblings 运算符不起作用，因为 input 和 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>