別のCSSスタイルを上書きするCSSスタイルを作成する方法

Question

2つのCSSスタイルがありますが、1つの特定の「幅」とそれ以外のCSSスタイルはほとんど同じです。別のCSSスタイルを継承するが、プロパティを上書きするCSSスタイルを作成するにはどうすればよいですか？

.FirstStyle 
    { 
     margin: 0px 0px 0px 8px; 
     position: relative; 
     display: inline-block; 

     height: 29px; 
     width: 5px; 

     float: left; 
    } 


    .SecondStyle 
    { 
     margin: 0px 0px 0px 8px; 
     position: relative; 
     display: inline-block; 

     height: 29px; 

     float: left; 
    } 

Answer 1

あなたは幅上記の二つのクラスでは、このようにしてみてください

を行うことができますが..あなただけFirstStyleクラスのための幅を定義する。ここ

.FirstStyle, .SecondStyle 
{ 
    margin: 0px 0px 0px 8px; 
    position: relative; 
    display: inline-block; 

    height: 29px; 
    width: 5px; 

    float: left; 
} 

を定義した（と、とにかくやるされていませんこのクラスが他のものの下にあるという事実は、上で指定された最終的な幅を上書きすることができる）。

.FirtsStyle 
{ 
    width: 5px; 
} 

Answer 2

別のCSSスタイルを継承するが、プロパティを上書きするCSSスタイルを作成するにはどうすればよいですか？

次のCSSスタイルは自動的に前のプロパティをオーバーライドします。オーバーライドするプロパティの下にプロパティを追加するだけで、指定された新しいスタイルを除くすべてのプロパティが継承されます。

例：

HTML：

<div class="someClass anotherClass"> 
    .... 
</div> 

はCSS：

.someClass { 
    width: 100px; 
    color: green; 
} 
.anotherClass { 
    width: 200px; <-- This will override the above values 
    color: red; 
} 
.someClass { 
    width: 450px !important; <-- The !important tag will override both suceeding as well as preceeding properties 
} 
.someClass { 
    width: 500px; <-- This will override the first two styling properties 
} 

Answer 3

あなたはCSS specificity value

を計算することができます各IDの値について

1. 要素は、インラインスタイルを持っている場合、それは自動的に（1,0,0,0 点）勝つ
2. 、各クラス値について0,1,0,0点
3. を適用（または擬似クラスまたは属性セレクタ）、各要素参照の 0,0,1,0点
4. を適用し、0,0,0,1点

---

を適用ノート

1. ユニバーサルセレクタ（*）がない特異値（0,0,0,0）
2. 擬似要素を有していない（例えば:first-line）0,0,1,0
3. 擬似クラス:not()を取得し、その 擬似クラスの兄弟とは異なり、0,0,0,1を得ることの括弧内の だものだけを、それ自体で何の特異性を追加しません。
4. !importantの値にCSSのプロパティ値を追加すると、自動で が獲得されます。マークアップのインラインスタイルもオーバーライドします。唯一の方法 !importantの値は別の値で上書きできます！重要な ルールはCSSで後で宣言され、それ以外の場合は同等または大きな特異性 の値が指定されます。 特異度に1,0,0,0,0を追加すると考えることができます