利用 :has() 伪类实现父元素根据子元素状态变色，只需在父元素的样式选择器中嵌套 :has() 并指定子元素的状态条件。例如，当列表项内的复选框被选中时，通过 li:has(input:checked) 直接修改 li 的背景色或文字颜色，无需 javascript 介入即可响应交互。
如何选中包含特定子元素的父级？
要选中包含特定子元素的父级，使用 :has() 作为父选择器的伪类，并在括号内写入子元素的 CSS 选择器。浏览器会检查父元素内部是否存在匹配的子元素，如果存在，则应用父元素的样式规则。这种方法打破了传统 CSS 只能向下继承的限制，实现了“向上”或“横向”的样式控制。
/* HTML 结构示例 */
<ul class="todo-list">
<li>
<input type="checkbox" id="task1">
<label for="task1">完成项目报告</label>
</li>
<li>
<input type="checkbox" id="task2" checked>
<label for="task2">回复邮件</label>
</li>
</ul>
/* CSS 样式 */
.todo-list li {
padding: 10px;
margin-bottom: 5px;
background-color: #f0f0f0;
transition: background-color 0.3s;
}
/* 核心逻辑：当 li 内部有被选中的 checkbox 时 */
.todo-list li:has(> input[type="checkbox"]:checked) {
background-color: #d4edda;
color: #155724;
}
/* 可选：未选中时的样式微调 */
.todo-list li:has(> input[type="checkbox"]:not(:checked)) {
background-color: #fff;
}上述代码定义了一个待办事项列表。默认情况下，列表项为灰色背景。当用户点击复选框使其处于 :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 设为只读或降低透明度。这适用于某些业务逻辑中，按钮的禁用状态是由后端数据决定的，但前端希望同步反馈输入框的状态。
<form class="data-form">
<input type="text" name="username" placeholder="用户名">
<input type="email" name="email" placeholder="邮箱">
<button type="submit" disabled>提交</button>
</form>
.data-form button[disabled] {
opacity: 0.6;
cursor: not-allowed;
}
/* 当 form 内存在被禁用的 button 时，所有 input 变灰 */
.data-form:has(button[disabled]) input {
background-color: #e9ecef;
color: #6c757d;
pointer-events: none;
border-color: #ced4da;
}在此场景中，HTML 结构中按钮初始即为 disabled。CSS 规则 .data-form:has(button[disabled]) input 成功选中了表单内的所有输入框，并应用了灰色背景和禁用指针事件。这确保了即使没有 JS 同步操作，UI 也能直观地反映“当前不可提交”的状态，提升了用户体验的一致性。
