html - 如何在外部 CSS 中有效地 'subclass'？

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 方面的培训并正在寻求帮助...

用什么格式来指定 height: 220px 的 searchBoxLarge，而不复制整个 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;
}