class vs idセレクタを使用した場合のレンダリングの差異

Question

div内に「チャットバブル」のレンダリングに問題があります。バブルコンテナのCSSルールはIDセレクタである（純粋CSSまたはjQueryの、だから、jQueryの問題ではない）場合には、異なる次いで、レンダリングされるセレクタとしてクラス名を使用して適用される

See Demo Here

。あなたはクラスセレクタを使用した場合、コンテナの幅はすべてのグラグラ行く、の例から見ることができるようにここで

はCSS

#tweetBox { 
    position: absolute; 
    top: 72px; 
    right: 158px; 
    display: none; 
    margin: 0 0 15px 15px; 
} 
.tweetBox-class { 
    position: absolute; 
    top: 72px; 
    right: 158px; 
    display: none; 
    margin: 0 0 15px 15px; 
} 

です。

なぜIDセレクタVSクラスセレクタを使用するとレンダリングに違いがありますか？

Answer 1

あなたは、スタイルシート内の他のクラスを持っているし、彼らはあなたのJavaScriptコードで自分のコンテナに適用されている：

function sID(message) { 
    var b = $("<div id='tweetBox' />"); 
    $("#header").html("").append(b); 
    b.addClass("triangle-right right"); 
    b.html(message).fadeIn(300).delay(2000).fadeOut(300); 
} 
function sCLASS(message) { 
    var b = $("<div />"); 
    $("#header").html("").append(b); 
    b.addClass("tweetBox-class triangle-right right"); 
    b.html(message).fadeIn(300).delay(2000).fadeOut(300); 
} 

ので、ブラウザは、コンテナをレンダリングする際に考慮にすべてのこれらのクラスを取ることがあります。

IDセレクタを持つルールは、クラスセレクタのみを持つルールをすべてオーバーライドしますが、クラスセレクタを持つルールは最初に適用され、他のクラスより優先されます後であなたのスタイルシートに。