클래스 대 id 선택기를 사용할 때 렌더링 차이가 발생했습니다.

Question

div에 '채팅 풍선'을 렌더링하는 데 문제가 있습니다.

See Demo Here

거품 용기에 대한 CSS 규칙이 다르게 그 ID가 선택되면 렌더링 셀렉터 등의 클래스 이름을 사용하여 적용 (순수한 CSS 또는 JQuery와, 그래서 그것은 JQuery와 문제되지 않음)되고 .

여기에 클래스 선택 컨테이너의 폭이 모든 남았습니다 간다 사용되는 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

당신은 스타일 시트에서 다른 클래스를 가지고 그들은 당신의 자바 스크립트 코드에서 컨테이너에 적용되는 것 :

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 선택기가있는 규칙은 클래스 선택기 만있는 다른 모든 규칙보다 우선합니다. 반면 클래스 선택기가있는 클래스는 다른 클래스보다 먼저 적용되고 일부 스타일은 다른 클래스에서 우선 적용되므로 적용됩니다 나중에 스타일 시트에서.