CSS如何实现仅当前序div含指定子元素时选中后续a标签？

原因分析 #

你原先写的#container #child ~ #stylethis不生效，是因为~是同级兄弟选择器，只能选中同一个父元素下、位于当前元素之后的同级节点。#child是#container的子节点，和#stylethis不属于同一个父元素，自然无法匹配到。

解决方案1：使用CSS :has() 选择器（推荐，现代浏览器支持） #

现在主流浏览器已经支持CSS原生的:has()选择器，可以直接匹配“包含指定子元素的父元素”，刚好满足你的需求，写法如下：

#container:has(#child) ~ #stylethis {
  /* 你需要设置的样式，示例如下 */
  color: red;
  font-weight: bold;
}

这个选择器的逻辑是：匹配内部包含#child的#container元素，再选中该元素后续的同级#stylethis节点，完全符合你的需求。
兼容性说明：Chrome 105+、Firefox 121+、Safari 15.4+均已支持，覆盖当前90%以上的全球用户流量。

解决方案2：兼容低版本浏览器的JS实现 #

如果需要兼容不支持:has()的旧版浏览器，CSS本身无法实现该逻辑（旧版CSS没有父元素判断能力），可以用少量JS实现：

1. 先定义目标样式类：

#stylethis.active {
  /* 你需要设置的样式 */
  color: red;
}

2. 添加判断逻辑：

if (document.querySelector('#container #child')) {
  document.querySelector('#stylethis').classList.add('active')
}

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