CSS如何选有子元素的节点？

的直接子元素
• 不能把伪类写在 :has() 外部再组合，例如 div:has(p):hover 是合法的，但 div:hover:has(p) 会失效（部分浏览器不支持伪类顺序颠倒）
• :has(:empty) 无法匹配「有空白文本节点」的元素（如含换行或空格），因为 :empty 要求完全无子节点（包括文本节点）；此时可用 :has(*):not(:has(* + *)) 等变通方式，但更推荐 JS 判断

替代方案：当 :has() 不可用时怎么办

在不支持 :has() 的环境（如微信内置浏览器、旧版 iOS Safari），需回退到其他手段。

• 服务端或构建时添加 class：例如后端判断是否有子元素，输出
  ...
  ，再用 div.has-aside 控制样式
• CSS 自定义属性配合 JS：用 JS 检测 element.querySelector('footer') 是否存在，存在则设置 element.style.setProperty('--has-footer', '1')，CSS 中写 section:has([style*="--has-footer:1"]) {...}（不优雅但可行）
• 避免反向选择：重构 HTML 结构，让状态类由父级主动控制（如用
  ），而非靠子元素推断

:has() 与兄弟/后续兄弟选择器的联动场景

:has() 常和 +、~ 组合，实现“某元素存在 → 影响其后的兄弟”的逻辑。

• form:has(:invalid) + .error-message：当表单内任一控件校验失败，显示紧邻的错误提示
• details:has(summary:focus) ~ .panel：点击
  时，影响后续兄弟 .panel 的样式（注意 details 默认不触发 :focus，需加 tabindex）
• 慎用 ~ 配合复杂 :has()：例如 section:has(h2) ~ section:has(h3) 易受 DOM 顺序干扰，且可读性差，建议拆分为独立规则或改用 JS

实际项目中，:has() 最实用的不是“选父”，而是「基于内容存在性做样式开关」——比如只在有图片时启用图注样式、有视频时显示播放按钮图标。它的价值不在覆盖所有场景，而在让一部分原本必须 JS 的逻辑回归 CSS。兼容性仍是硬门槛，上线前务必检查目标环境是否支持。

到这里，我们也就讲完了《CSS如何选有子元素的节点？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！