仅当标题出现在具有特定类的 div 之后才更改样式答案

【问题标题】：Change styling only if the header comes right after a div with a specific class仅当标题出现在具有特定类的 div 之后才更改样式
【发布时间】：2019-06-17 18:21:48
【问题描述】：

在以下标记中：

<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 标题的颜色更改为红色，前提是它紧跟在 dynamic-div 类的 div 之后。

如何使用 CSS 做到这一点？

【问题讨论】：

这里有重复的问题：select-first-occurring-element-after-another-element

标签： css css-selectors

【解决方案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>

【讨论】：

【解决方案2】：

以下选择器应该可以工作：

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

解释：

Parent 是 h3 元素，其类为 .dynamic-div。
+: 第一个元素之后的元素
h3：将样式应用于 h3 元素

【讨论】：

正确的父路径是：div.dynamic-div + h3select-first-occurring-element-after-another-element
糟糕，忘记了这是一个 div 而不是 h3 元素。谢谢

【解决方案3】：

CSS 代码：

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

【讨论】：

【解决方案4】：

为每个“H3”添加类“Dynamic-div”，并将该行添加到该类的css。红色” ;或类似的东西

【讨论】：

向 h3 添加类仅在您可以更改代码的情况下才有效。它不回答这个问题。 select-first-occurring-element-after-another-element