推荐使用 :has() 判断元素是否含子元素，语义清晰；兼容性要求高时可用 :not(:empty)；注意 :empty 会匹配仅含空白符的元素，:has() 不支持父级选择且需防性能问题。
可以通过 :not() 伪类配合结构选择器（如 :empty、:has()）来判断元素是否含有子元素，并据此控制样式。现代浏览器中推荐使用 :has()，兼容性稍差但语义清晰；若需支持旧版浏览器，可借助 :empty 的反向逻辑配合 :not() 实现类似效果。
用 :has(*) 直接匹配含子元素的元素
这是最直观的方式：只要元素内部存在任意子元素（包括文本节点以外的标签），就匹配成功。
-
div:has(*) { background: lightblue; }→ 所有含至少一个子元素的div变蓝底 -
ul:has(li) { border: 1px solid #333; }→ 仅当ul下有li时加边框 - 注意：
:has()不支持在 CSS 中用于父级选择（如div:has(> p) + span是合法的，但不能写成p:has(+ span)）
用 :not(:empty) 判断非空容器（兼容性更好）
:empty 匹配不包含任何子节点（包括文本、注释、元素）的元素，因此 :not(:empty) 就等价于“有内容”——即含有子元素或文本。
-
section:not(:empty) { padding: 1rem; }→ 有内容的section才加内边距 - ⚠️ 注意：如果元素里只有空白符（换行、空格），
:empty仍会匹配，因为这些被视为空白文本节点；实际中建议 HTML 写紧凑些，或用 JS 清理空白 - 该方案支持 Chrome 4+、Firefox 3.5+、Safari 3.2+，比
:has()兼容更广
排除特定子类型：比如“有子元素但不含图片”
结合 :has() 和 :not() 可实现更精细的条件控制。
立即学习“前端免费学习笔记（深入）”；
-
article:has(*) :not(:has(img)) { color: #555; }→ 错误写法（嵌套无效） - 正确方式：
article:has(*) { color: #555; } article:has(img) { color: #000; }→ 先设默认，再用更具体的规则覆盖 - 或者：
article:not(:has(img)):has(*) { font-style: italic; }→ 同时满足“有子元素”且“没有img”才生效
慎用场景：避免与 JS 操作冲突
这类选择器依赖 DOM 结构实时判断，若 JS 动态增删子元素，样式会自动响应，但可能引发意料外的重绘或性能问题。
- 高频操作（如列表项快速增删）建议用 class 控制，而非纯 CSS 条件选择器
-
:has()在某些浏览器中可能触发强制同步样式计算，影响滚动或动画性能 - 服务端渲染（SSR）时若初始 HTML 不含子元素，而 JS 后续插入，可能导致首屏样式与交互后不一致
