Vue中c-checkbox组件:not()选择器类名失效问题排查

我在Vue中开发了包含4种变体的c-checkbox组件，需要为除c-checkbox--switch之外的所有变体渲染背景图。

使用input[type="checkbox"]选择器时样式生效正常，但改用&__input类名选择器后样式完全失效，希望明确该行为的原因。

代码对比 #

当前可行代码

// 可行方案
&:not(.c-checkbox--switch) {
  & > input[type='checkbox']:checked + label:after {
    background-image: url("some url");
  }
}

目标失效代码

// 期望实现的写法（失效）
&:not(.c-checkbox--switch) {
  & > &__input:checked + label:after {
    background-image: url("some url");
  }
}

编译结果对比截图 #

• 使用type="checkbox"选择器的编译结果截图
• 使用&__input类选择器的编译结果截图

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