CSS中:has选择器结合兄弟选择器失效原因及解决方法

选择器失效的核心原因 #

你用的#root:has(.projects) ~ body完全无效，是因为兄弟选择器~只能匹配和目标元素同级的元素，但实际DOM结构里#root是body的子元素（父子关系），根本不是兄弟，所以这个选择器永远命中不了body。

正确实现方法 #

方案1：纯CSS（推荐，现代浏览器支持） #

利用:has()选择器从父元素body出发，检测其后代#root .projects是否存在，结合媒体查询实现需求：

@media (pointer: fine) and (max-height: 620px) {
  body:has(#root .projects) {
    overflow: auto;
  }
}

:has()是CSS的“父选择器”能力，目前Chrome、Firefox、Safari等主流浏览器都已支持，完全能覆盖笔记本设备的场景。

方案2：JavaScript兼容方案（适配老旧浏览器） #

如果需要兼容不支持:has()的浏览器，可以用JS动态检测并设置样式：

// 封装检测逻辑
function updateBodyOverflow() {
  // 检查设备条件
  const meetsDeviceConditions = window.matchMedia('(pointer: fine) and (max-height: 620px)').matches;
  // 检查是否在项目页面
  const isProjectPage = document.querySelector('#root .projects') !== null;

  // 设置body的overflow
  document.body.style.overflow = meetsDeviceConditions && isProjectPage ? 'auto' : '';
}

// 页面加载时执行
window.addEventListener('load', updateBodyOverflow);
// 视口尺寸变化时重新检测
window.addEventListener('resize', updateBodyOverflow);
// 单页应用路由切换时重新检测（根据你的框架调整，比如React/Vue的路由钩子）
// 示例：监听hash路由变化
window.addEventListener('hashchange', updateBodyOverflow);

如果是React/Vue这类单页应用，记得在路由切换完成后调用updateBodyOverflow，确保页面切换时能及时更新样式。

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