如何为.contactSection下首个h1元素单独设置CSS外边距？

你用的.contactSection h1:nth-child(1)选择器逻辑是：选中.contactSection范围内所有满足「是其父元素的第一个子元素」的h1标签。

看你的HTML结构，第二个h1在<div class="post">里面，它刚好是post容器的第一个子元素，所以也被这个选择器命中了，这就导致两个h1都加上了上边距。

方案1：用子选择器直接锁定直接子元素 #

如果你要的就是.contactSection直接下属的那个h1，用子选择器>最精准：

.contactSection > h1 { margin-top: 15px; }

这个只会匹配.contactSection的直接子元素里的h1，完全不会影响嵌套在内部的其他h1。

方案2：用:first-of-type选择器 #

如果你想选中.contactSection范围内出现的第一个h1（不管它是不是直接子元素），可以用:first-of-type：

.contactSection h1:first-of-type { margin-top: 15px; }

这个选择器会在.contactSection的所有后代里，找到第一个h1标签并设置样式，后续的h1不会被选中。

• :nth-child(n)：看元素在父元素中的位置，不管元素类型，只要是父元素的第n个子元素就会被选中
• :first-of-type：看父元素中同类型的第一个元素，只关注元素类型，不管它在父元素里的位置顺序

内容的提问来源于stack exchange，提问作者JKK