如何在外部CSS中有效地"子类化"？

Question

我有一个定义的框适用于我的大部分网站:

.searchBox
{
    width: 610px;
    height: 170px;
    padding: 15px 55px 5px 15px;
    background: url('../images/advanced_search_BG.jpg') no-repeat;
    margin-top: 10px;
}

但我有一个盒子需要更大一些; 它必须是height: 220px.

我知道我可以复制上面的内容,称之为,比方说searchBoxLarge,把它放在我的div标签上,然后完成.但这是我不想要的重复代码.

这可能是一个"愚蠢的问题",但我没有接受CSS培训并寻求帮助......

指定searchBoxLargewith 的格式是什么height: 220px,但没有重复整个searchBox条目？

Answer 1

添加searchBoxLarge到searchBox声明,然后单独声明,searchBoxLarge以覆盖高度值.

.searchBox, .searchBoxLarge
{
    width: 610px;
    height: 170px;
    padding: 15px 55px 5px 15px;
    background: url('../images/advanced_search_BG.jpg') no-repeat;
    margin-top: 10px;
}

.searchBoxLarge
{
    height: 220px;
}