使CSS代码更清晰（删除重复行）

Question

如何更清晰地编写此代码。我的意思是从一开始就删除这个重复的部分。我想我应该添加到HTML和CSS <li>但是，当我粘贴成这个标签我<span>不工作在所有...

CSS：

.box i.popular { 
    width: 60px; 
    height: 60px; 
    display:inline-block; 
    vertical-align:text-bottom; 
    margin-top: 10px; 
    margin-left: 1px; 
    background: url('../images/popular.png') no-repeat 
} 

.box i.upload { 
    width: 60px; 
    height: 60px; 
    display:inline-block; 
    vertical-align:text-bottom; 
    margin-top: 10px; 
    margin-left: 1px; 
    background: url('../images/upload.png') no-repeat; 
} 

.box i.diary { 
    width: 60px; 
    height: 60px; 
    display:inline-block; 
    vertical-align:text-bottom; 
    margin-top: 10px; 
    margin-left: 1px; 
    background: url('../images/diary.png') no-repeat; 
} 

HTML：

<a href="#"><div id="test"><div class="box"><p><i class="popular"></i><span>Inspiration</span></p></div></div></a> 
    <a href="#"><div id="test"><div class="box"><p><i class="upload"></i><span>Upload photo</span></p></div></div></a> 
    <a href="#"><div id="test"><div class="box"><p><i class="diary"></i><span>Go to diary</span></p></div></div></a> 

提前致谢！

Answer 1

试试这个：

因为它们都使用的大小和位置的属性，您不必重复你的全球票房的风格。因此，请将常用样式附加到.box，接下来需要设置的唯一一件事是变体的各个样式。

.box i{ 
    width: 60px; 
    height: 60px; 
    display:inline-block; 
    vertical-align:text-bottom; 
    margin-top: 10px; 
    margin-left: 1px; 
} 
.box i.popular { 
    background: url('../images/popular.png') no-repeat 
} 

.box i.upload { 
    background: url('../images/upload.png') no-repeat; 
} 

.box i.diary { 
    background: url('../images/diary.png') no-repeat; 
} 

Answer 2

博伊德的答案是伟大的，但有时你不想要的样式应用到所有元素（在你的情况下，所有.box i元素）。

在这种情况下，你可以通过用逗号分隔使用多个CSS选择一个样式定义：

/* This will apply to all listed selectors */ 

.box i.popular, 
.box i.upload, 
.box i.diary { 
    width: 60px; 
    height: 60px; 
    display:inline-block; 
    vertical-align:text-bottom; 
    margin-top: 10px; 
    margin-left: 1px; 
} 

/* This adds some extra styles to each one at a time */ 

.box i.popular { 
    background: url('../images/popular.png') no-repeat 
} 

.box i.upload { 
    background: url('../images/upload.png') no-repeat; 
} 

.box i.diary { 
    background: url('../images/diary.png') no-repeat; 
} 

或者，您也可以给他们所有的公共课。这是Font Awesome的工作原理。

HTML：

... <i class="icon diary"></i> ... 

CSS：

box i.icon { 
    width: 60px; 
    height: 60px; 
    display:inline-block; 
    vertical-align:text-bottom; 
    margin-top: 10px; 
    margin-left: 1px; 
} 

.box i.popular { 
    background: url('../images/popular.png') no-repeat 
} 

.box i.upload { 
    background: url('../images/upload.png') no-repeat; 
} 

.box i.diary { 
    background: url('../images/diary.png') no-repeat; 
}