如何修改包含特定title属性图片的父div背景色？

问题核心 #

纯CSS没有原生的父选择器，所以你之前的属性选择器只能选中图片本身，无法直接向上匹配父容器。要实现需求，有两种可行方案：

方案一：用CSS :has()伪类（现代浏览器支持） #

:has()是CSS新增的伪类，允许你选中包含指定子元素的父容器，目前Chrome、Edge、Safari 15.4+已支持，Firefox需手动开启layout.css.has-selector.enabled配置项。

代码示例 #

CSS

/* 选中包含title含"yup!"图片的.pics容器，添加高亮样式 */
.pics:has(img[title~="yup!"]) {
  background-color: #ffeeee; /* 高亮背景色 */
  border: 1px solid #ff4444;
}

/* 保留你原来的图片边框样式 */
img[title~="yup!"] {
  border: 2px solid red;
}

HTML

<div class="mom">
  <b class="titlecenter">mom title</b>
</div>

<div class="pics">
  <a href="link.html">
    <p class="center"><img src="img.gif" title="yup!"></p>
  </a>    
</div>

方案二：JavaScript实现（全浏览器兼容） #

如果需要兼容旧浏览器，用JS遍历目标图片，找到对应父容器并添加高亮类是更稳妥的方式。

代码示例 #

CSS

/* 定义高亮样式类 */
.highlight {
  background-color: #ffeeee;
  border: 1px solid #ff4444;
}

img[title~="yup!"] {
  border: 2px solid red;
}

JavaScript

// 找到所有title包含"yup!"的图片
const targetImages = document.querySelectorAll('img[title~="yup!"]');

// 遍历图片，找到最近的.pics父容器并添加高亮类
targetImages.forEach(img => {
  const parentContainer = img.closest('.pics');
  if (parentContainer) {
    parentContainer.classList.add('highlight');
  }
});

HTML

保持你原有的结构即可，无需修改。

补充提示 #

• 若父容器不是固定的.pics，可修改closest()的参数，比如closest('div')匹配最近的div父元素；
• 针对动态加载的图片（比如异步渲染的内容），可以用MutationObserver监听DOM变化，自动给符合条件的父容器添加高亮。

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