如何仅当后续存在div元素时应用CSS规则（仅用CSS，不使用JS）

首先明确：纯CSS无法直接实现“当div2存在于div1之后时，给div1添加样式”——因为CSS选择器的匹配逻辑是从前往后，只能基于当前元素的子元素、后代元素、后续兄弟元素来编写规则，没有反向检测“当前元素之后是否存在某元素”的原生选择器。

下面给出两种可行的替代方案：

方案1：调整HTML结构，利用CSS兄弟选择器 #

如果可以修改HTML的顺序，把div2放到div1前面，就能用CSS的通用兄弟选择器~实现需求：

修改后的HTML：

<div class="div2">..</div>
<div class="div1">...</div>

对应的CSS：

.div2 ~ .div1 {
    background-color: red;
}

这个规则的意思是：如果页面中存在.div2，那么它后面所有的.div1都会应用红色背景样式。

方案2：用JavaScript检测并添加样式 #

如果不能调整HTML结构，就用JS来实现逻辑判断：

首先在CSS里定义目标样式类：

.red-bg {
    background-color: red;
}

然后添加JS代码：

// 检测是否存在div2
const hasDiv2 = document.querySelector('.div2') !== null;
if (hasDiv2) {
    // 给div1添加样式类
    document.querySelector('.div1').classList.add('red-bg');
}

这段代码会在页面加载时检查.div2是否存在，若存在则给.div1加上预设的样式类。

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