如何实现特定元素仅作为容器首个子元素时顶部外边距为0？

直接将特定元素选择器与:first-child伪类组合使用，就能精准定位到「既是容器首个子元素、又是你目标元素」的节点，不会误改其他首个子元素的样式。

举几个常见场景的示例：

1. 目标元素带类名的情况 #

假设你的目标元素有类名.target-element，容器类名为.container，CSS写法如下：

/* 仅当.target-element是.container的首个子元素时，移除顶部外边距 */
.container .target-element:first-child {
  margin-top: 0;
}

2. 目标元素是特定标签的情况 #

如果目标元素是固定标签（比如<section>），无需类名也能精准选中：

/* 仅当<section>是.container的首个子元素时，移除顶部外边距 */
.container section:first-child {
  margin-top: 0;
}

原理说明 #

:first-child伪类本身是选中父元素的第一个子节点，但和前面的特定选择器（类选择器/标签选择器）组合后，就变成了「选中父元素的第一个子节点，且这个子节点匹配前面的特定选择器」，完美满足你的需求——只修改目标元素在作为首个子元素时的顶部外边距，不会影响其他首个子元素。

内容的提问来源于stack exchange，提问作者Faye D.