如果 CSS 规则在父元素中仅出现一次，则将其应用于该元素

Question

给定：

 <h2>Header Line 1</h2>
 <h2>Header Line 2</h2>

我知道我访问第二个 h2，并且可以通过执行以下操作在该元素下方应用一些间距：

h2 + h2 {
  padding-bottom: 20px;
}

但是，我的某些部分仅包含一个标题行，例如：

<h2>Catchy Tagline!</h2>

当只有一个h2元素时，是否可以有选择地访问padding-bottom: 20px;之类的内容并将其应用于h2:first-child？

否则，我将在任何/所有标签之间添加一个 20px 的空间h2如果它们如我的第一个示例所示堆叠，我希望它们保持在 0 边距/填充。

Answer 1

你可以

用:only-of-type来做到这一点：

h2:only-of-type {
  padding-bottom: 20px;
}

如果仅当唯一的h2是第一个子类时才需要应用样式，则不应将:first-child替换为:only-of-type，而应将其添加，以便同时具有两个伪类：

h2:first-child:only-of-type {
  padding-bottom: 20px;
}