利用 :has() 伪类实现父元素根据子元素状态变色，只需在父元素的样式选择器中嵌套 :has() 并指定子元素的状态条件。例如，当列表项内的复选框被选中时，通过 li:has(input:checked) 直接修改 li 的背景色或文字颜色，无需 javascript 介入即可响应交互。
如何选中包含特定子元素的父级？
要选中包含特定子元素的父级，使用 :has() 作为父选择器的伪类，并在括号内写入子元素的 CSS 选择器。浏览器会检查父元素内部是否存在匹配的子元素，如果存在，则应用父元素的样式规则。这种方法打破了传统 CSS 只能向下继承的限制，实现了“向上”或“横向”的样式控制。
/* HTML 结构示例 */
上述代码定义了一个待办事项列表。默认情况下，列表项为灰色背景。当用户点击复选框使其处于 :checked 状态时，:has() 检测到该状态，触发父级 li 的样式变更，背景变为浅绿色，文字变为深绿色。这种机制完全由浏览器原生支持，性能优于 JS 监听事件后添加类名。
如何处理多个子元素状态的组合判断？
处理多个子元素状态的组合判断时，可以在 :has() 括号内使用逗号分隔的选择器列表来表示“或”关系，或使用相邻兄弟选择器、子选择器等组合来表示更复杂的逻辑。例如，可以判断父元素是否同时包含某个文本内容的标题和特定的图标类，或者判断是否在悬停状态下改变了子元素的颜色。
/* 场景：卡片组件，当卡片内有“错误”类标签时，整个卡片变红边框 */
.card-container {
border: 2px solid transparent;
padding: 20px;
border-radius: 8px;
}
/* 情况1：包含带有 .error 类的子元素 */
.card-container:has(.error) {
border-color: #dc3545;
background-color: #f8d7da;
}
/* 情况2：包含带有 .warning 类的子元素 */
.card-container:has(.warning) {
border-color: #ffc107;
background-color: #fff3cd;
}
/* 情况3：鼠标悬停在卡片上，且子按钮被聚焦 */
.card-container:has(button:focus):hover {
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
/* 实际 HTML 结构 */
<div class="card-container">
<h3>系统通知</h3>
<p class="error">连接超时，请重试</p>
<button>刷新</button>
</div>
在第二个示例中，.card-container 根据内部不同状态类的存在而改变外观。当 p.error 存在时，容器应用红色主题；当 p.warning 存在时，应用黄色主题。此外，还演示了结合伪类 :hover 和 :focus 的组合判断，只有当鼠标悬停在容器上且内部按钮被聚焦时才触发阴影效果。这种灵活性使得 CSS 能够处理以前需要大量 JavaScript 才能实现的复杂 UI 状态管理。
基于输入框禁用状态的具体问题
基于程序中某个输入、条件或结果的具体问题是：当表单中的提交按钮被禁用时，如何自动让关联的输入框也显示为禁用状态或视觉上的不可用状态？
可以通过 :has() 反向选择来实现。通常我们习惯从输入框控制按钮，但现在可以利用 :has() 检测按钮的状态来影响输入框。例如，当 form 内的 button[disabled] 存在时，将 input 设为只读或降低透明度。这适用于某些业务逻辑中，按钮的禁用状态是由后端数据决定的，但前端希望同步反馈输入框的状态。
在此场景中，HTML 结构中按钮初始即为 disabled。CSS 规则 .data-form:has(button[disabled]) input 成功选中了表单内的所有输入框，并应用了灰色背景和禁用指针事件。这确保了即使没有 JS 同步操作，UI 也能直观地反映“当前不可提交”的状态，提升了用户体验的一致性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
