避免某些相邻元素和类之间的CSS样式

Question

我想在padding-top: 20px;和h3之间添加body，但是如果h3前面有另一个元素（例如h2），则不希望添加。这可能吗？

在标题前面加上正文但在标题之间不希望有的填充时，在所有标题上添加padding-top可以得到所需的填充：

请注意，此文档是使用knitr创建的Rmarkdown，因此我无法完全控制所有html。首选纯CSS解决方案。

---

更新： 对于也使用knitr进行Rmarkdown的任何人来说，该解决方案的目标都是相当复杂的：

/* First h2 following h1 */
.level1 > .level2:nth-child(3) > h2 {
    padding-top: 0px;
}
/* First h3 following h2 */
.level2 > .level3:nth-child(3) > h3 {
    padding-top: 0px;
}

通过查看生成的HTML，我了解到h2之后的第一个h1在level1中的第三个元素中，并且该元素被称为level2。对于第一个h3同样。这就是上面的目标。其他文件的结构可能有所不同，因此请自己看看。

Answer 1

怎么样

body > h3:first-child {
   padding-top: 20px;
}

这将只影响带有标头3的身体的直接子对象，而中间没有任何东西。

感谢@Oram，指出缺少的：first-child

Answer 2

尝试一下：

body > h3:first-child {
   padding-top: 20px;
}

它将仅将CSS应用于主体的第一个直接子级，即h3。

Answer 3

您可以使用>选择器加:first-child来仅定位直接的h3子级。

* {
  margin: 0;
  padding: 0;
}

.test {
  background-color: #cccccc;
  margin: 10px;
  padding: 10px;
}

.test > h3:first-child { color: red; }

<div class="test">
  <h3>Targeted h3</h3>
  <p>Paragraph</p>
  <h3>h3 not targeted</h3>
</div>

<div class="test">
  <p>Paragraph</p>
  <h3>h3 not targeted because of the p tag</h3>
  <h3>h3 not targeted</h3>
</div>