jQuery addClass高さの問題

Question

divを拡張しようとしています。しかし、すべての作品は '高さ'のプロパティを受け入れる。私はこのクラスを追加するためにjQueryのaddClass関数を使用します。

.expandHighlight 
{ 
    height:300px; 
    border-color:rgba(48,110,158,.75)!important; 
    box-shadow:0 0 5px 2px rgba(48,110,158,.5); 
} 

jQuery関数を使用します。

$('#expand').click(function() 
    { 
    $('#buttonField').css('visibility','hidden'); 
    $('#expand').addClass("expandHighlight"); 
    }); 

また、拡張しようとしているdiv imにはcssがあります。

#expand 
{ 
    background-color:#F9F9F9;border-radius:3px; 
    border:1px solid #C0C0C0; 
    width:500px; 
    height:66px; 
    border-radius:2px; 
} 

Answer 1

クラスを追加すると、同じオブジェクトに関連する2つのCSSルールが高さに割り当てられます。つまり、CSSの特定ルールによって、どのCSSルールが適用されるかが決定されます。

この場合、#expandルールは.expandHighlightルールよりも特異性が高いので勝ちます。

#expand.expandHighlight { 
    height:300px; 
    border-color:rgba(48,110,158,.75)!important; 
    box-shadow:0 0 5px 2px rgba(48,110,158,.5); 
} 

をそして、それはより多くの特異性を持つことになりますし、expandHighlightクラスが割り当てられたときに獲得します：

あなたはこのよう.expandHighlightルールに多くの特異性を追加することによってこの問題を解決することができます。

あなたはCSSの特異性とその仕組みについてもっと読むことができますhere。

<div id="expand" class="expandNormal"></div> 

.expandNormal { 
    height: 500px; 
    border:1px solid #C0C0C0; 
    width:500px; 
} 

.expandHighlight { 
    height:300px; 
    border-color:rgba(48,110,158,.75)!important; 
    box-shadow:0 0 5px 2px rgba(48,110,158,.5); 
} 

あなたがのコースにclass="expandNormal"を追加します。あなたはまた、ルールの両方が唯一のクラスで作ると、このような通常の高さのルールの後expandHighlightルールを置くことによってそれを修正することができ

---

#expandオブジェクトであるため、そのクラスが存在する場合にのみ、expandHighlightルールによってオーバーライドされるデフォルトルールを取得します。

Answer 2

#idセレクタは、.classセレクタよりspecificity以上を有します。

.classセレクターを変更すると、より具体性が高くなります。

Answer 3

div内のコンテンツが高さ自体よりも小さい場合に問題が発生します。 http://jsfiddle.net/Ajjd4/