为何:first-child选择器会同时为两张图片设置左侧边距？

你的问题出在选择器的作用范围上：div.center img:first-child会匹配每个.center容器下的第一个img元素，而你每个.center里都只有一个img，所以两张图都会被选中。要只给第一张图加左边距，需要把选择器的范围限定在第一个.column容器内，以下是几种可行方案：

方案一：给第一个.column添加专属类 #

修改HTML，给第一个.column增加类标识：

<div class="column first-column">
  <div class="center">
    <img src="assets/images/images/crop-1.png">
  </div>
</div>
<div class="column">
  <div class="center">
    <img src="assets/images/images/sliced-2.png">
  </div>
</div>

对应的CSS调整为：

.first-column .center img {
  margin-left: 100px;
}

这种方法兼容性最好，逻辑直观，后期维护也更清晰。

方案二：通过.column的位置直接选择 #

如果.column是同一个父容器的直接子元素，无需修改HTML，直接用位置选择器限定第一个.column：

.column:first-child .center img {
  margin-left: 100px;
}

或者使用:first-of-type（如果父容器内只有.column类型的元素，效果与上述一致）：

.column:first-of-type .center img {
  margin-left: 100px;
}

这两种方案都能精准选中第一个.column内的图片，不会影响第二个图片的样式。

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