如何重用样式？ [英] How to reuse styles?

问题描述

过去我对CSS有很多了解，但是现在我不记得如何重用样式了。

示例：

我有一些选项卡，它们的类为 tab ，可以使用javascript进行切换。当前选择的选项卡还有另一个类， $ 。

其CSS样式：

  .tab {
位置：相对； 
 top：0；剩余
：0； 
宽度：100％； 
 padding：15px 0 15px 0; 
边界：薄薄的#CCC； 
 text-align：center; 
 font-weight：粗体; 
底边保证金：10px； 
颜色：＃272F42； 
 cursor：指针； 
 background-color：白色； 
} 
 
 .active {
职位：相对； 
 top：0；剩余
：0； 
 padding：15px 0 15px 0; 
边界：薄薄的#CCC； 
 text-align：center; 
 font-weight：粗体; 
底边保证金：10px； 
颜色：＃272F42； 
光标：默认； 
 background-color：＃FFCF75; 
} 
  

两种样式都有很多相同的样式，除了2以外，光标和背景色。

所以我的问题是，我该如何重新使用.tab样式并将其用于.active吗？

我想实现以下功能：

  .active {//扩展.tab 
光标：默认； 
 background-color：＃FFCF75; 
} 
  

谢谢。

解决方案

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

 < a class = tab active>< / a> 
  

如果您想要针对这两个类的特定组合的css规则，则可以这样做因此：

  .tab {
位置：相对； 
 top：0；剩余
：0； 
宽度：100％； 
 padding：15px 0 15px 0; 
边界：薄薄的#CCC； 
 text-align：center; 
 font-weight：粗体; 
底边保证金：10px； 
颜色：＃272F42； 
 cursor：指针； 
 background-color：白色； 
} 
 
 .active 
 {
光标：默认； 
 background-color：＃FFCF75; 
} 
 
 .tab.active / *无空格* / 
 {
 / *样式均为.tab和.active的元素* / 
 / *保留.active可用于制表符* / 
 / *以外的其他功能，并允许覆盖.tab和.active * / 
} 
  

这可以使您避免不必要地复制样式声明...并为您提供了当元素同时具有两个元素时覆盖两个单独类的特异性。 / p>

Back in the past I learned a lot about CSS but now I can't remember how to reuse styles.

Example:

I have some tabs with class tab and I can switch them with javascript. The current selected tab has another class, active.

Their CSS style:

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

Both styles has a lot of identic styles except 2, cursor and background-color.

So my question is, how can I resuse the .tab style and use it in .active?

I want achieve something like this:

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

Thanks.

解决方案

You could, and probably should, apply both classes to the element like so:

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

If you want a css rule for the specific combination of these two classes, you'd do it like so:

.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 */
}

This allows you to avoid making unnecessary copies of your style declarations... and gives you the specificity to override either of the individual classes when an element has both.

这篇关于如何重用样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！