CSS选择器:not(:last-child)失效问题求助

你的CSS选择器无效的核心原因是：每个.social-media-icon都是其父级<a>标签的唯一子元素，因此所有img元素都是各自父元素的:last-child，not(:last-child)自然匹配不到任何元素。

修复方案 #

最简洁的方式是直接控制图标外层的<a>标签（它们才是.icons容器的同级子元素）：

.icons a:not(:last-child) {
  margin-right: 30px;
}

这样就能给除最后一个图标容器之外的所有<a>设置右侧间距，间接实现图标之间的分隔效果。

如果一定要针对img元素设置样式，也可以通过父元素的选择器来定位：

.icons a:not(:last-child) .social-media-icon {
  margin-right: 30px;
}

不过前者更符合布局逻辑——间距通常应该控制在元素容器之间，而非内部的图片元素上。

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