Question

回到过去，我学到了很多关于CSS的知识，但现在我不记得如何重用样式了。

示例：

我有一些类tab的标签，我可以用javascript切换它们。当前选定的标签有另一个类active。

他们的CSS风格：

.tab {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0 15px 0;
    border: solid thin #CCC;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #272F42;
    cursor: pointer;
    background-color: white;
}

.active {
    position: relative;
    top: 0;
    left: 0;
    padding: 15px 0 15px 0;
    border: solid thin #CCC;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #272F42;
    cursor: default;
    background-color: #FFCF75;
}

除了cursor和background-color之外，这两种风格都有很多相同的风格。

所以我的问题是，如何重新使用.tab样式并在.active中使用它？

我想要达到这样的目标：

.active { //extends .tab
    cursor: default;
    background-color: #FFCF75;
}

感谢。

Answer 1

在class属性中使用这两个类名。在.active规则中，仅定义与第二个示例中已有的不同样式。

<div class="tab active"></div>

Answer 2

您可以，也可能应该将这两个类应用于元素，如下所示：

<a class="tab active"></a>

如果你想要这两个类的特定组合的css规则，你可以这样做：

.tab {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0 15px 0;
    border: solid thin #CCC;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #272F42;
    cursor: pointer;
    background-color: white;
}

.active 
{
    cursor: default;
    background-color: #FFCF75;
}

.tab.active /* no space */
{
    /* styles for elements that are both .tab and .active */
    /* leaving .active reusable for things other than tabs */
    /* and allowing override of both .tab and .active */
}

这使您可以避免对样式声明进行不必要的复制...并且在元素同时具有覆盖任何一个类时的特异性。

Answer 3

这样做。结合样式并用逗号分隔。然后添加针对差异的其他规则。

.tab, .active {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0 15px 0;
    border: solid thin #CCC;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #272F42;
}

.tab{
    cursor: pointer;
    background-color: white;
}

.active {
    cursor: default;
    background-color: #FFCF75;
}

修改

根据您的评论

我目前正在通过向班级添加.active样式来切换标签属性。

这就是我要做的事情：

HTML

<div class="tab"></div>

CSS

.tab { position: relative; top: 0; left: 0; width: 100%; padding: 15px 0 15px 0; border: solid thin #CCC; text-align: center; font-weight: bold; margin-bottom: 10px; color: #272F42; cursor: pointer; background-color: white; } .active { cursor: default; background-color: #FFCF75; }

然后只需添加或删除.active类，保留.tab即可。

只要样式表中的.active 降低，它就会覆盖必要的位。

Answer 4

将.tab规则更改为.tab, .active。

Answer 5

.active, .tab {
   ... full style of both here
}

.active {
   ... the styles that differ from .tab
}

Answer 6

这个选择器继承是SASS的一个很好的特性。

如果您想坚持使用纯CSS，请查看Selector继承部分，您可以看到带有@extend的SASS代码如何转换为常规CSS。

Answer 7

您可以将多个类应用于元素。因此，您可以使用class =“tab active”的元素，并使其包含两个规范。

Answer 8

您可以使用identic样式提取基类，并使用两个类标记您的元素：.tab .base
您可以将动态css语言用作sass或less，它支持类inhritance

Answer 9

您可以将.active组合成.tab并覆盖需要更改的部分，如下所示：

.tab, .active {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0 15px 0;
    border: solid thin #CCC;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #272F42;
    cursor: pointer;
    background-color: white;
}

.active {
    cursor: default;
    background-color: #FFCF75;
}

如何重用样式？

9 个答案: