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培训并寻求帮助......

使用searchBoxLarge指定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;
}

Answer 2

有关于在SitePoint http://www.sitepoint.com/first-look-object-oriented-css/

上执行此操作的好文章

我建议你阅读文章的回复，因为像这样做你的CSS有一些缺点，还有一些好处。

我同意Object Oriented CSS的名称具有误导性，因为没有真正的子类型

干杯！奥林

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

2 个答案: