如何仅使用CSS在存在.cityeduclass子元素时为span.item-price应用样式

方案1：原生:has()选择器实现（优先推荐） #

你提到的:has()伪类就是专门解决这类「根据子元素匹配父元素」需求的标准CSS特性，目前全球95%以上的用户所用浏览器都已支持该特性（Chrome 105+、Firefox 121+、Safari 15.4+），直接使用即可，没有任何副作用：

span.item-price:has(span.cityeduclass) {
  background-color: red;
}

这个方案是最规范的，无论cityeduclass在父元素内的什么位置，无论你要给父元素设置什么类型的样式（背景、边框、布局属性等）都能正常生效。

方案2：无JS兼容旧浏览器的变通实现 #

如果需要兼容不支持:has()的老旧浏览器，由于旧版CSS标准没有提供父选择器能力，无法直接选中符合条件的父元素，可以用子元素伪元素模拟视觉效果的方案，适配你给出的HTML结构和红背景需求：

/* 给父元素设置定位基准，避免伪元素溢出到外层 */
span.item-price {
  position: relative;
  z-index: 0;
}
/* 只有cityeduclass存在时，才会生成铺满父元素的伪元素模拟红背景 */
span.item-price span.cityeduclass::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: red;
  z-index: -1;
}

注意：该方案存在局限性，仅适合模拟背景色这类可以用子元素覆盖实现的视觉效果，如果需要给父元素设置边框、内外边距、修改布局规则等，旧版CSS纯样式无法实现，建议直接使用:has()或者加少量JS兜底。

方案3：JS兜底实现（适配极老环境+复杂样式需求） #

如果需要兼容极老版本浏览器，且要实现的父元素样式无法用伪元素模拟，可以加少量JS给符合条件的父元素打类标记，兼容性拉满：

// 遍历所有cityeduclass元素，给对应的item-price父级加专属类
document.querySelectorAll('span.cityeduclass').forEach(eduEl => {
  const priceWrap = eduEl.closest('span.item-price')
  if (priceWrap) priceWrap.classList.add('has-cityedu')
})

对应CSS代码：

span.item-price.has-cityedu {
  background-color: red;
}

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