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标头的颜色更改为红色，除非它紧接在 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>

Answer 2

以下选择器应该起作用：

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

说明：

父项是h3类的.dynamic-div元素。
+：第一个元素之后的元素
h3：将样式应用于h3元素

Answer 3

CSS代码：

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

Answer 4

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

仅当标头紧随具有特定类的div之后，才更改样式

4 个答案: