html - 调整相邻 header 标签的边距

Question

我正在寻找一种方法来调整 header 标签(<h1>、<h2>、<h3> 等)的边距仅当它们在 DOM 中彼此相邻时。

所以这就是我得到的: http://jsfiddle.net/LtAHW/1/

基本上，我想要实现的是收紧 <h2> 之间的间距和 <h3>但只有当它们一个接一个地出现时。因此，在上面的示例中，只有第一个子部分和第一个子子部分之间的空间。

我更喜欢一个可以与标题标签的任意组合一起使用的解决方案，但是任何想法或建议都将不胜感激!

Answer 1

你好，

你试过相邻选择器吗？

h2 + h3 {
  margin-top: 10px;
}

如果第二个元素紧跟在第一个元素之后，它将仅选择第二个元素。因此，在这种情况下，

之后的每个

元素都将被定位并给予 10px 的 margin-top。

如果您想要一个适用于任何标题元素组合的解决方案，您可以创建几个类以在需要时使用，如下所示:

.h-first + .h-adjacent {
  margin-top: 10px;
}

不是世界上最好的类名，但你明白了。您可以将它们与标题的任意组合(或与此相关的任何元素)结合使用，并以这种方式定位内容。

相邻选择器在 IE7+ 中被支持，所以你应该在大多数元素中被覆盖。

希望这就是您要找的!

编辑:

Here's your example updated .