CSS 合并两个类

Question

我在水平线上有 4 张图片。前 3 张图片有 margin-right: 20px;。除了最后一张完全没有边距的图片。我就是这样做的，我觉得可以做得更好:

.threeimg {
margin-right: 20px;
border: 1px solid #cfcfcf;
border-radius: 6px;
background-color: white;
padding: 8px; }


.lastimg {
border: 1px solid #cfcfcf;
border-radius: 6px;
background-color: white;
padding: 8px; }

有什么办法可以解决这个问题？请不要对我太苛刻，我 3 天前才真正开始学习 HTML 和 CSS。

Answer 1

这样做:DEMO

CSS

.image {
    margin-right: 20px;
    border: 1px solid #cfcfcf;
    width: 100px;
    border-radius: 6px;
    background-color: white;
    padding: 8px;
}
.no-margin {
    margin-right: 0;    
}

HTML

<img src="http://goo.gl/UEZSH" class="image">
<img src="http://goo.gl/UEZSH" class="image">
<img src="http://goo.gl/UEZSH" class="image">
<img src="http://goo.gl/UEZSH" class="image no-margin">

编辑

注意: .no-margin 类应该在 .image 类下面，因为 CSS 的级联特性