在浏览器不支持 :has() 选择器时，降级方案的核心是放弃纯 css 的父级或兄弟级关联逻辑，转而使用 javascript 监听事件来动态添加类名。具体做法是在页面加载或交互时，通过 queryselector 查找目标元素，并根据其状态（如输入框是否有值、复选框是否选中）为父容器或相邻元素添加特定的 class（例如 .is-valid 或 .has-content）。这样做能确保在不支持该特性的旧版浏览器中，ui 依然能根据用户操作呈现出预期的视觉反馈，而不会导致布局错乱或样式丢失。
如何检测 :has() 的支持情况并执行脚本注入
要安全地应用降级策略，首先需要确认当前环境是否支持 :has()。如果检测到不支持，则立即执行一段脚本来模拟其效果。通常的做法是利用 CSS.supports API 进行特性检测，若返回 false，则绑定 input 或 change 事件，手动更新 DOM 类的状态。这种机制保证了现代浏览器享受原生 CSS 的高性能渲染，而旧浏览器通过少量的 JS 开销获得等效体验。
// 检查 CSS :has() 支持性
if (!CSS.supports('selector(:has(*))')) {
// 如果不支持，绑定事件来模拟类名切换
const inputs = document.querySelectorAll('.form-group input');
inputs.forEach(input => {
const updateState = () => {
const parent = input.closest('.form-group');
if (input.value) {
parent.classList.add('has-value');
} else {
parent.classList.remove('has-value');
}
};
input.addEventListener('input', updateState);
// 初始化状态
updateState();
});
}针对表单验证场景的具体实现与结果
以表单验证为例，当用户在一个 <input> 中输入内容时，我们希望其父级 <div class="form-group"> 显示绿色边框。在不支持 <code>:has() 的环境中，上述脚本会捕获 input 事件，一旦 value 非空，便给父级添加 .has-value 类。对应的 CSS 规则 .form-group.has-value { border-color: green; } 随即生效。若用户清空输入，类名被移除，边框恢复默认颜色。这一过程完全由 JS 驱动，实现了与 .form-group:has(> input:value-optional) 相同的视觉效果。
立即学习“前端免费学习笔记（深入）”；
.form-group {
border: 1px solid #ccc;
padding: 10px;
transition: border-color 0.3s;
}
/* 现代浏览器使用 :has() */
.form-group:has(> input:not(:placeholder-shown)) {
border-color: #4caf50;
}
/* 降级方案使用的类名 */
.form-group.has-value {
border-color: #4caf50;
}基于程序中某个输入、条件或结果的具体问题
在上述代码中，如果输入框初始带有占位符文本（placeholder），且用户未进行任何操作，input.value 为空字符串，此时 .has-value 类不会被添加，父级保持灰色边框。这是符合预期的，因为占位符仅作为提示，不代表用户已填写有效数据。若需将“显示占位符”也视为一种状态（例如为了高亮必填项），则需修改判断逻辑，改为检查 input:placeholder-shown 或使用 input.validity.valid 等更严格的校验条件，并在 JS 中同步更新类名状态。
