如何用CSS选择器选中包含div.good-inner的div.outer父元素

可以实现，目前可以通过CSS原生特性或JavaScript两种方式完成需求。

1. CSS原生实现 #

使用CSS Selectors Level 4新增的:has()伪类即可实现，对应选择器写法：

/* 仅匹配直接子元素包含div.good-inner的div.outer */
div.outer:has(> div.good-inner) {
  /* 你的自定义样式 */
}

/* 若需要匹配内部任意层级包含div.good-inner的div.outer，去掉>即可 */
div.outer:has(div.good-inner) {
  /* 你的自定义样式 */
}

该选择器会精准匹配你给出的示例中第一个带有good-inner子元素的.outer元素，另外两个不符合条件的元素不会被选中。

兼容性说明 #

:has()目前已得到绝大多数主流现代浏览器支持：Chrome 105+、Safari 15.4+、Firefox 121+，如果你的产品不需要兼容老旧浏览器，可直接使用该写法。

2. 兼容低版本浏览器的JS实现 #

如果需要适配不支持:has()的老旧浏览器，可以通过JS给符合条件的父元素加专属类的方式实现：
首先遍历所有.outer元素，给内部包含.good-inner的元素新增自定义类：

document.querySelectorAll('.outer').forEach(outer => {
  if (outer.querySelector('.good-inner')) {
    outer.classList.add('has-good-inner')
  }
})

再针对新增的类写样式即可：

div.outer.has-good-inner {
  /* 你的自定义样式 */
}

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