css - 仅当 header 紧跟在具有特定类的 div 之后时才更改样式

Question

在以下标记中:

<div class="dynamic-div">Just a text</div>
<h3>A Header</h3>

<h3>A Header</h3>

<div class="dynamic-div">Just a text</div>
<h3>A Header</h3>

<h3>A Header</h3>

<h3>A Header</h3>

我只想将 h3 header 的颜色更改为红色，前提是它紧跟在 dynamic-div 类的 div 之后。

我如何使用 CSS 做到这一点？

Answer 1

添加如下CSS，+符号为相邻兄弟选择器

.dynamic-div + h3 {
  color: red;
}

<div class="dynamic-div">Just a text</div>
<h3>A Header</h3>
<h3>A Header</h3>
<div class="dynamic-div">Just a text</div>
<h3>A Header</h3>
<h3>A Header</h3>
<h3>A Header</h3>