Question

我试图设置一个标签，其中包含一个复选框。我希望标签在选中复选框时更改颜色。

regex { ... }

使用SASS和＆符号，可以使用：

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

我进行了一次测试，但是，这在Shopify中不起作用。事实上，Shopify似乎根本没有编译它。我错过了什么吗？

Answer 1

任何主要浏览器目前都不支持选择父级（无论您使用的是什么CSS预处理器）。

但是，如果您的标签与复选框位于同一级别，那么您可以像这样使用兄弟选择器：

＆＃13;

input:checked + label {
  background: red;
}

＆＃13;

<input id="aCheckbox" type="checkbox" />
<label for="aCheckbox">Test</label>

＆＃13;

就SCSS而言，它应该看起来像（我还没有测试过它）：

input {
    background-color: red;

    &:checked {

        & + label {
            background-color: green;
        }
    }
}