CSS:not选择器控制子元素样式技巧

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《CSS利用:not控制子元素样式技巧》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

推荐使用 :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 后续插入，可能导致首屏样式与交互后不一致

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS:not选择器控制子元素样式技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。