SCSS 输入复选框是选中样式

Question

如果你能帮助我，我将不胜感激，我试图在我的 SCSS 中基于 input:checked 为 2 个元素设置样式，但没有成功。

<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.io/ricardonas/pen/xxZVydJ

Answer 1

如果您想让段落可见，您需要更新选择器。 :checked + label 表示 "get the label immediately after the checked element"。按照这个逻辑，你需要定位 "the paragraph after the label after the input":

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

SCSS 输入复选框是选中样式

SCSS Input checkbox is checked style

html

css

sass

less