几个CSS类只有一个属性不同？

Question

这是一个简单的问题,我只是不知道如何在网上搜索它.

我有三个CSS类:.header,.cell,.footer.它们看起来如下:

.header
{
    display:table-cell; 
    vertical-align:middle; 
    width:130px;
    height:20px; 
    background-color: Yellow; 
    border: 1px solid silver;
}
.cell
{
    display:table-cell; 
    vertical-align:middle; 
    width:130px;
    height:85px; 
    background-color: Yellow; 
    border: 1px solid silver;
}
.footer
{
    display:table-cell; 
    vertical-align:middle; 
    width:130px;
    height:40px; 
    background-color: Yellow; 
    border: 1px solid silver;
}

所有这些类之间的唯一区别是height属性.如何简化此代码？

谢谢.

Answer 1

使用,的元素在为共同的属性选择器列表分开:

.foo, .bar {
   color: red;
}

.foo {
   font-size: 120%;
}

.bar {
   font-size: 80%;
}

这会让双方.foo和.bar是红色的,但有不同的文字大小.