Question

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

例如，我有：

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

我会根据是否选中此框来更改label::before的内容。

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

让我考虑SCSS执行此操作的原因是（如果我没有误会）它确实可以用SASS。
然而，由于我不熟悉SASS，我宁愿使用SCSS，因为转换我的文件显然非常容易。

Answer 1

我对您的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>

我以某种方式帮助过你。

Answer 2

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

Answer 3

您将无法根据输入的状态更改标签的内容，您需要JS。

但是，您可以在常规ol CSS（和扩展名为SCSS）中使用伪选择器来使用input:checked{}

来设置复选框本身的样式

编辑：我有所纠正，请参阅莱昂纳多·科斯塔的解决方案，使用兄弟选择器。

SCSS：如果选中子输入，则更改元素样式

3 个答案: