html - 调整彼此相邻的标题标签的边距

Question

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

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

基本上，我想要实现的是收紧 the<h2>和 the之间的间距，<h3>但只有当它们一个接一个出现时。所以，在上面的例子中，只有第一个 Sub Section 和第一个 Sub-Sub Section 之间的空间。

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

score 3 · Accepted Answer

嘿，

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

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

只有当它紧跟第一个元素时，它才会选择第二个元素。因此，在这种情况下，<h2> 之后的每个 <h3> 元素都将被定位并赋予 10px 的 margin-top。

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

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

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

IE7+ 支持相邻选择器，因此您应该参与大多数项目。

希望这就是你要找的！

编辑：

score 0 · Accepted Answer

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

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

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

很简单，只需选择一个标题标签并命名每个紧随其后的子部分，使用相同的标题标签，您可以为标题提供所有相同的功能和CSS。

2 回答 2