使用 :has() 伪类选择器可以直接选中包含已勾选复选框的父元素，从而通过 css 控制外部提交按钮的状态。只需在样式表中定义一个规则，当表单或容器内存在 :checked 状态的子级时，改变按钮的样式（如启用并变色）。这种方法无需 javascript 即可实现基础的视觉联动。
:has() 如何选中包含勾选项的父级？
:has() 允许选择器基于其后代元素的状态来匹配祖先元素。要选中包含已勾选复选框的父级，可以使用 :has(> input:checked) 或 :has(input:checked)。前者仅匹配直接子级，后者匹配任意层级后代。选中父级后，即可通过相邻兄弟选择器或直接作用于父级的样式来修改按钮外观。
<style>
/* 默认禁用状态 */
.submit-btn {
background-color: #ccc;
cursor: not-allowed;
}
/* 当 form 内有 checked 的 input 时，激活按钮 */
form:has(> input[type="checkbox"]:checked) .submit-btn {
background-color: #007bff;
cursor: pointer;
}
</style>
上述代码中，form:has(> input[type="checkbox"]:checked) 精确匹配了包含直接子级复选框且该复选框被选中的 form 元素。此时内部类名为 .submit-btn 的按钮会应用蓝色背景和可点击光标。若复选框未被勾选，则回退到默认的灰色禁用样式。
如何处理多个复选框中任一勾选的情况？
当表单中存在多个复选框，且要求任意一个被勾选即激活按钮时，:has() 依然有效。选择器 :has(input:checked) 会检查所有后代输入元素，只要有一个满足 :checked 状态，父级选择即成功。这避免了为每个复选框编写单独的样式规则，简化了多选项场景下的 CSS 逻辑。
<style>
.form-container:has(input[type="checkbox"]:checked) button {
opacity: 1;
pointer-events: auto;
}
.form-container button {
opacity: 0.5;
pointer-events: none;
}
</style><div class="form-container">
<input type="checkbox" id="opt1"> 选项1
<input type="checkbox" id="opt2"> 选项2
<button>提交</button>
</div>
在此示例中，.form-container:has(input[type="checkbox"]:checked) 匹配的是包含任何已勾选复选框的容器。一旦匹配成功，内部的 button 将变为不透明且可点击。这种写法对复选框的数量和位置不敏感，只要它们在容器内部，任一勾选都会触发样式变化。
未勾选时按钮保持禁用状态的机制是什么？
按钮的禁用状态依赖于 CSS 的层叠规则和默认样式的优先级。在未触发 :has() 匹配条件时，浏览器应用基础样式，通常设置 pointer-events: none 和较低的透明度或灰色背景，以视觉上表示不可用。当勾选复选框后，:has() 规则因更高特异性或后续声明而覆盖基础样式，恢复交互能力。这种机制完全由 CSS 引擎处理，无需脚本干预状态切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
