如何重用样式？

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;
}

这两种风格都有很多相同的风格,除了2 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;
}

编辑

根据您的评论

我目前正在通过向class属性添加.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
}