除了最后一个元素外，每个元素都有边距。

Question

我有两行CSS用于给除了最后一个元素之外的每个元素设置边距。有没有一种方法将它们合并成1行？

这是我目前正在使用的（有效的）：

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

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

我试着把它改成了：

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

但是它没有起作用？有什么想法为什么会这样吗？

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

- user4756836

---

你可能想尝试使用.work img:last-child { margin-right: 0px }。 - Quintile

@ Quintile 目前仍在使用 2 行 CSS。我只是想知道是否可以用一行代码完成。我的第一部分代码正在运行，但第二部分没有。 - user4756836

原因是没有 :last 选择器，但我们有 :last-child 和 :last-of-type。我在使用这些选择器进行实验，并认为这可能会帮助将来的某个人：https://jsfiddle.net/21rs5dog/ - Dylan Valade

@DylanValade https://api.jquery.com/last-selector/ 和 :last 在单独测试时像 img:last 一样正常工作。 - user4756836

你说得对，:last是jQuery选择器，但是你的问题是关于CSS的，目前CSS不支持它。 - Dylan Valade

Answer 1

你犯了一个小错误。

更正为：

.work img:not(:last)

到

.work:not(:last-child)

检查这里的Fiddle。

- ketan

Answer 2

尝试这个：

试试看：

.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，您的浏览器需要支持选择器。

参考链接：http://caniuse.com/#search=%3Alast-child

- Redy S

Answer 3

如果需要完整的浏览器支持，建议使用一些javascript或为最后一个img添加一个.last类。否则，您可以只做如下操作：

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

- Sean Stopnik