css - 解决固定标题和第一节之间的重叠问题

Question

我正在使用经典设置编写登陆页面:

• 一个固定的标题
• 几个部分(产品描述、推荐、谷歌地图等)
• 页脚

我的语义是这样的:

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

由于 header 是固定的，因此我需要对第一个 部分进行特定的 CSS 处理，例如:

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

这样标题和第一部分就不会重叠。所以最终我的第一部分需要与其他部分区别对待。我目前的方法对我来说似乎是一个调整，在这种常见情况下，应该有一种语义方法来处理这个问题或一个干净的 CSS 市场实践。有什么想法吗？

Answer 1

你可以使用 :first-of-type 伪元素!

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

这会在您的 HTML 中找到第一个 section 标签，而无需向其添加额外的类，并且仅将书面样式应用于该标签。