调整彼此相邻的标题标记的边距

Question

我正在寻找一种方法来调整标头标签上的边距（<h1>，<h2>，<h3>等）仅当它们相邻时DOM中的另一个。

所以这就是我所拥有的： http://jsfiddle.net/LtAHW/1/

基本上，我想要达到的目的是收紧<h2>和<h3>之间的间距，但只有当它们一个接一个地出现时才会收紧。因此，在上面的例子中，只有第一个Sub Section和第一个Sub-Sub Section之间的空格。

我更喜欢可以使用标头标签的任意组合的解决方案，但任何想法或建议都将不胜感激！

Answer 1

嘿那里，

您是否尝试过相邻的选择器？

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

如果它紧跟在第一个元素之后，它将选择第二个元素 。因此，在这种情况下，每个＆lt; h3＆gt; ＆lt; h2＆gt;之后的元素将被定位并给予10px的保证金。

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

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

不是世界上最好的班级名字，但你明白了。您可以将这些与标题的任意组合（或任何元素）一起使用，并以这种方式定位。

IE7 +支持相邻的选择器，因此大多数项目都应该涵盖您。

希望这就是你要找的东西！

编辑：

Here's your example updated

Answer 2

如果我理解正确，那么这应该有效：

h2 {font-size: 16px;margin:0px;}
h3 {font-size: 14px;margin:0px;}

当然，你可以给出你想要多少像素，这只是一个例子。

简单的只需选择一个标题标记，然后将每个Sub部分的名称命名为相同的标题标记，您可以为标题提供所有相同的功能 CSS 。