SCSS/SASS中如何在子复选框选中时选择父选择器修改样式

你原来的写法问题很明确：嵌套在.child__checkbox里的&:checked选择器，匹配的是选中状态的复选框本身，根本没法向上选中父元素.parent，自然改不了父元素的样式。

现在用原生CSS支持的:has()伪类就能直接实现需求，完全不会影响复选框自身的原有属性，SCSS代码如下：

.parent {
  justify-content: left;

  // 匹配「内部包含选中状态的.child__checkbox」的.parent元素
  &:has(.child__checkbox:checked) {
    justify-content: right;
  }

  .child__checkbox {
    // 这里保留你之前写的所有复选框原有属性即可，不会被上述规则改动
  }
}

兼容说明 #

:has()伪类目前已经被所有现代主流浏览器支持，如果你的项目需要兼容Chrome 105以下、Firefox 121以下的老旧版本，可以加一小段JS做兜底：

1. 先调整SCSS代码，用状态类控制父元素样式

.parent {
  justify-content: left;
  &.checkbox-checked {
    justify-content: right;
  }

  .child__checkbox {
    // 保留复选框原有属性
  }
}

2. 加JS监听复选框状态，切换父元素的类名

const checkbox = document.querySelector('.child__checkbox');
checkbox.addEventListener('change', () => {
  const parent = checkbox.closest('.parent');
  parent.classList.toggle('checkbox-checked', checkbox.checked);
});

两种方案都只会修改父元素的justify-content属性，不会改动复选框本身的任何原有样式。

内容的提问来源于stack exchange，提问作者tengxuanp