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

使用Countries Failed: Åland Islands American Samoa Antarctica Bosnia and Herzegovina Bonaire, Sint Eustatius and Saba Bouvet Island British Indian Ocean Territory Cabo Verde Cocos Curaçao Côte d'Ivoire French Southern Territories Falkland Islands (the) [Malvinas] Guam Heard Island and McDonald Islands Holy See Lao People's Democratic Republic Marshall Islands Micronesia Palau Northern Mariana Islands Palestine, State of Pitcairn Puerto Rico Russian Federation Réunion Saint Barthélemy Saint Helena, Ascension and Tristan da Cunha Somalia South Sudan South Georgia and the South Sandwich Islands Svalbard and Jan Mayen Syrian Arab Republic Tanzania, United Republic of United States Minor Outlying Islands United Kingdom of Great Britain and Northern Ireland Wallis and Futuna Western Sahara* United States of America Yemen分隔公共属性的选择器列表中的元素：

这会使.foo, .bar { color: red; } .foo { font-size: 120%; } .bar { font-size: 80%; }和.foo都变为红色，但文字大小不同。

Answer 2

只需创建另一个具有所有公共属性的类，并将其分配给每个元素

.container {
    display:table-cell; 
    vertical-align:middle; 
    background-color: Yellow; 
    border: 1px solid silver;
}

.header
{
    height:20px; 
}
.cell
{
    height:85px; 
}
.footer
{
    height:40px; 
}

希望它有所帮助;）

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

2 个答案: