如何用纯CSS根据子元素类名隐藏父级article元素

核心解决方案 #

直接使用CSS的:has()伪类定位包含.ad_label子元素的<article>并隐藏：

article:has(.ad_label) {
  display: none !important;
}

关键说明 #

• 实现逻辑：:has()是CSS原生的父级检测伪类，能精准匹配所有包含.ad_label类元素的<article>（无论该子元素处于哪个层级），完美解决你需要隐藏广告父容器的需求。
• 样式优先级：添加!important是为了确保该隐藏规则能覆盖页面原有针对<article>的显示样式，避免被高优先级样式干扰。
• 适配刷新场景：CSS规则会自动作用于页面刷新后新增的元素，完全无需JavaScript介入，适配你页面每5秒自动刷新的场景。

兼容性 #

目前所有现代主流浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）均已默认支持:has()选择器，适合作为浏览器插件的实现方案。

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