スタイルを再利用するには？

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

あなたは可能性があり、おそらく、そのような要素に両方のクラスを適用する必要があります：あなたはこの2つのクラスの特定の組み合わせのためのCSSルールをしたい場合、あなたはそのようにそれを行うだろう

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

：

.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 2

.tabのルールを.tab, .activeに変更してください。

Answer 3

class属性の両方のクラス名を使用してください。 .activeルールでは、2番目の例のように異なるスタイルのみを定義します。

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

Answer 4

このセレクタの継承は、SASSという素晴らしい機能です。

普通のCSSを使用する場合は、セレクタの継承に関するセクションを参照してください。@extendを使用してSASSコードを通常のCSSに変換する方法を確認できます。

Answer 5

要素に複数のクラスを適用できます。したがって、class = "tab active"の要素を持つことができ、両方の仕様を含むようにすることができます。

Answer 6

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

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

Answer 7

これを行います。スタイルを組み合わせ、コンマで区切ります。次に、差異を対象とする他のルールを追加します。あなたのコメント

に基づいて

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

EDIT

は、私は現在、クラス 属性に.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; 
} 

それからちょうどあるよう.tabを残して、.activeクラスを追加または削除します。

.activeがの場合、スタイルシートでが下になると、必要なビットが上書きされます。

Answer 8

1. あなたは同じスタイルで基本クラスを抽出し、二つのクラスを使用して要素をマークすることができます：.tab .base
2. あなたは組み合わせることができ

Answer 9

inhritanceクラスをサポートしていsassかlessなどの動的CSSの言語を使用することができます。このように変更する必要のある部分を無効にしてください：

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