SCSS：如果检查子输入，则更改元素样式

Question

我以前从未使用过 SCSS，我想知道它是否允许我根据内部的复选框是否被选中来设置元素的样式。

例如，我有：

 <label>
  <input type="checkbox"/>
</label>

我想更改 label::before 的内容，这取决于该框是否被选中。

SCSS 允许这样的事情吗？如果是，我该怎么做？

导致我考虑使用 SCSS 执行此操作的原因是（如果我没记错的话）SASS 确实有可能。

但是，由于我不熟悉 SASS，我宁愿使用 SCSS，因为转换我的文件显然非常容易。

原文由 QiMath 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不，没有 CSS 选择器可以根据子元素的状态来设置元素的样式。

原文由 darrylyeo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我对你的 HTML 做了一点改动，但我认为它真的可以帮助你。

萨斯代码：

 input[type=checkbox]
  + .checkbox-label
    color: blue
  &:checked + .checkbox-label
    color: red
    &:before
      content: ""
      border: 1px solid #a3adb3

 input[type=checkbox]+.checkbox-label {
  color: blue;
}

input[type=checkbox]:checked+.checkbox-label {
  color: red;
}

input[type=checkbox]:checked+.checkbox-label:before {
  content: "";
  border: 1px solid #a3adb3;
}

 <input type="checkbox" id="cbox1" value="first_checkbox">
<label for="cbox1" class="checkbox-label">Hello world</label>

我以某种方式帮助了你。

原文由 Leonardo Costa 发布，翻译遵循 CC BY-SA 3.0 许可协议