Question

我有一个有趣的问题，请考虑这个HTML：

<div class="foo">Hello</div>
<div class="foo">World</div>

<div class="bar">Hotel</div>
<div class="bar">Romeo</div>
<div class="bar">Foxtrot</div>

<div class="foo">Ford</div>
<div class="foo">Prefect</div>

这个内容是动态生成的，我不知道该课程什么时候会翻转。是否有一种纯粹的CSS方式来设置类的元素组？例如，我希望每个相邻的类“foo”组都是粗体并且具有特定的边距，而每个相邻的类“bar”组我想要是红色的。

**Hello**
**World**

Hotel
Romeo
Foxtrot

**Ford**
**Prefect**

帮我堆栈溢出，你是我唯一的希望！

Answer 1

怎么样：

.foo + .bar,
.bar + .foo{
  margin-top:10px;
}

每次.bar div跟随.foo div时，这将增加10px的保证金，反之亦然。

.foo + .bar,
.bar + .foo {
  margin-top: 10px;
  border-top: solid 1px black;
}

<div class="foo">Hello</div>
<div class="foo">World</div>

<div class="bar">Hotel</div>
<div class="bar">Romeo</div>
<div class="bar">Foxtrot</div>

<div class="foo">Ford</div>
<div class="foo">Prefect</div>

通过CSS为相邻的类组设置样式作为块？显而易见或不可能？

1 个答案: