除最后一个元素外的每个元素的边距

Question

我有 2 行 CSS 用于设置除最后一个元素之外的每个元素的边距。有没有办法把它合并成一行？

这是我目前的（工作）：

.work img {
    margin-right: 10px;
}

.work img:last {
    margin-right: 0px;
}

我尝试将其更改为：

.work img:not(:last) {
    margin-right: 10px;
}

但是不起作用？知道为什么吗？

更新我只有五张图片。我的另一个选择是只在前四个上有边距。

Answer 1

试试这个：

.work img {
    margin-right: 10px;
}

.work img:last-child {
    margin-right: 0px;
}

或

.work img:not(:last-child) {
    margin-right: 10px;
}

或jQuery解决方案：

jQuery('.work img:not(:last)').css({marginRight: 10);

请记住，如果您应用纯 CSS，您的浏览器需要支持选择器。

Answer 2

如果您需要完整的浏览器支持，我建议使用一些 javascript，或者在最后一个 img 上添加 class of .last。否则你可以这样做：

.work img:last-child {
  margin: 0;
}

Answer 3

你犯了个小错误

变化：

.work img:not(:last)

到

.work:not(:last-child)

Margin on every element except last