css - 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">

编辑

注意：由于CSS 的级联性质，.no-margin该类应位于该类之下.image

Answer 2

我总是尝试尽可能简单地编写我的代码，尤其是 html 代码。与后端编码器的合作会更容易。我删除类 no-margin 并使用 first-child 属性。代码如下，试试看。

CSS

  .image {
        margin-left: 20px;
        border: 1px solid #cfcfcf;
        width: 100px;
        border-radius: 6px;
        background-color: white;
        padding: 8px;
    }
    .image:first-child {
        margin-left: 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">

演示

http://jsfiddle.net/ppqCD/

Answer 3

使用 css 伪类选择器

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

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

Answer 4

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

.threeimg {
    margin-right: 20px; 
}

我们这里有更多的例子。 http://www.html5database.com/example-css.php