如何通过CSS根据内部图片src定位并隐藏外层指定容器？

方法1：使用CSS :has() 伪类（推荐，现代浏览器支持） #

CSS的:has()伪类可以直接选择包含指定子元素的父容器，正好匹配你的需求。你可以结合:nth-child(-n+3)，只隐藏主页面中前3个包含目标图片的分类容器，避免影响子页面的同类元素：

/* 仅隐藏主页面中前3个包含指定图片的分类容器 */
.cCategoryDivContainer:nth-child(-n+3):has(img[src="theimage.png"]) {
  display: none;
}

注意事项 #

• :has()伪类目前支持Chrome 105+、Firefox 121+、Safari 15.4+等现代浏览器，如果需要兼容更旧的浏览器，可采用下方的JS方案。
• 该写法的逻辑是：仅选中同时满足「是前3个.cCategoryDivContainer」和「内部包含src="theimage.png"的图片」的容器，子页面的同类容器若不满足这两个条件，就不会被误隐藏。

方法2：JavaScript 兼容方案（适配旧浏览器） #

如果需要兼容不支持:has()的浏览器，可以通过JS遍历目标图片，向上定位到外层容器并隐藏：

// 找到所有src匹配的目标图片
const targetImgs = document.querySelectorAll('img[src="theimage.png"]');

targetImgs.forEach(img => {
  // 向上查找最近的.cCategoryDivContainer容器
  const parentContainer = img.closest('.cCategoryDivContainer');
  if (parentContainer) {
    // 仅隐藏前3个符合条件的容器
    const containerIndex = Array.from(parentContainer.parentElement.children).indexOf(parentContainer);
    if (containerIndex < 3) {
      parentContainer.style.display = 'none';
    }
  }
});

说明 #

• closest()方法会从当前元素向上遍历DOM树，返回第一个匹配指定选择器的祖先元素，能精准定位到你需要的外层容器。
• 通过索引判断可以确保只操作前3个符合条件的容器，避免误修改其他页面元素。

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