Vue场景下不使用has()，纯CSS实现input:checked父元素样式方案咨询

首先明确：如果完全保留你当前的DOM结构（wrapper包含input），不使用has()选择器、不额外加类、不用JS的话，纯CSS没有办法实现“子元素状态控制父元素样式”的需求——因为CSS选择器只能从父到子、同级向前匹配，没法逆向从子元素选中父元素。

不过可以通过调整组件的DOM结构来实现纯CSS方案，核心思路是把input放到wrapper的同级位置且在它前面，然后用CSS兄弟选择器关联状态：

<template>
  <div class="checkbox-container">
    <!-- 将input移到wrapper外，作为同级前置元素 -->
    <input type="checkbox" class="checkbox-input" :checked="checked">
    <div class="wrapper">
      <!-- 原复选框的内容，比如图标、标签等 -->
      <span class="checkbox-label">{{ label }}</span>
    </div>
  </div>
</template>

<style scoped>
/* 利用兄弟选择器，当input被选中时修改后续wrapper的样式 */
.checkbox-input:checked ~ .wrapper {
  border-color: #2196F3;
  background-color: #E3F2FD;
  /* 其他你需要的样式 */
}

/* 隐藏原生input，用自定义样式替代 */
.checkbox-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
</style>

这种方案既不用加额外类修饰符，也不依赖兼容性差的has()，完全靠纯CSS实现需求，且兼容性覆盖所有现代浏览器和大部分旧版浏览器。

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