SCSS:如果选中子输入,则更改元素样式

Question

我之前从未使用过SCSS,我会知道是否允许我根据内部的复选框是否选中来确定元素的样式.

例如,我有:

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

label::before如果选中框,我会改变依赖的内容.

SCSS是否允许这样的事情？如果是,我该怎么办？

导致我考虑SCSS执行此操作的原因是(如果我没有误会),SASS确实可以实现.
然而,由于我不熟悉SASS,我宁愿使用SCSS,因为转换我的文件显然非常容易.

Answer 1

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

Answer 2

我对你的HTML做了一些改动,但我认为它可以真正帮助你.

Sass代码:

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>

我以某种方式帮助了你.