解决固定标题和第一部分之间的重叠

Question

我正在使用经典设置编写着陆页：

• 固定标题
• 几个部分（产品说明，推荐书，谷歌地图等）
• 页脚

我的语义看起来像这样：

<header>
  <!-- Responsive navigation bar -->
</header>
<section class="section-first">
  <!-- First section -->
</section>
<section>
</section>
...
<footer>
</footer>

由于标题已修复，我需要在第一个部分进行特定的CSS处理，如下所示：

.section-first {
    margin-top: 200px;
}

使标题和第一部分不重叠。因此，最终我的第一部分需要与其他部分区别对待。我目前的做法似乎是对我的一种调整，在这种常见情况下应该采用语义方法来解决这个问题或者干净的CSS市场惯例。有什么想法吗？

Answer 1

您可以使用:first-of-type伪元素！

section:first-of-type{
    margin-top:200px;
}

这会在HTML中找到第一个section标记，而不必为其添加额外的类，只会将书面样式应用于该标记。