SCSS输入复选框被选中的样式

Question

如果你能帮助我，我非常感激，我试图在我的SCSS中为2个元素设置基于input:checked的样式，但没有工作。

<div>
<input type='checkbox' id='checkbox'></input>
<label for='checkbox'>Lorem ipsum</label>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

div {
  user-select: none;
  input {
    &:checked + label {
      background: red;
    }
    &:checked + p {
      display: block;
    }
  }
  p {
    display:none;
  }
}

https:/codepen.ioricardonaspenxxZVydJ"。

Answer 1

如果你想让段落可见，你需要更新选择器。:checked + label 意思是 "在选中的元素之后立即获得标签"。按照这个逻辑，你需要将目标锁定在 "输入后标签后的段落"。

div {
  user-select: none;
  input {
    &:checked + label {
      background: red;
    }
    &:checked + label + p {
      display: block;
    }
  }
  p {
    display:none;
  }
}