如何仅用CSS选择器在img带loaded类时隐藏其父元素的::after伪元素

可以纯CSS实现，核心要先理清伪元素的归属：你代码里的::after是属于父级<div class="test">的逻辑子元素，不是img的同级兄弟元素，所以你之前写的相邻兄弟选择器+没法直接选中父元素的伪元素。

实现方案：用CSS :has() 选择器 #

你可以通过父选择器判断div内部是否存在带loaded类的img，匹配到后直接控制自身的::after隐藏，写法如下：

/* 匹配内部包含.loaded类img的.test元素，隐藏它的after伪元素 */
.test:has(img.loaded)::after {
  display: none;
}

兼容性说明 #

目前Chrome 105+、Firefox 121+、Safari 15.4+均已支持:has()选择器，覆盖了全球90%以上的用户群体。如果需要兼容更早版本的浏览器，你可以加极少量的JS做类名同步：给img加loaded类的同时，给父级.test也加个同名类，再写如下样式即可：

.test.loaded::after {
  display: none;
}

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