разница рендеринга при использовании селектора класса против идентификатора

Question

У меня проблемы с отображением «пузыря чата» в div.

См. Демонстрацию здесь

Когда правила CSS для пузырькового контейнера применяются с использованием className в качестве селектора, он отображается иначе, чем когда идентификатор является селектором (чистый 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;
}

Как видно из примера, когда используется селектор класса, ширина контейнера становится все шаткой.

Почему существует разница в рендеринге при использовании селекторов идентификаторов и селекторов классов?

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

Таким образом, браузер должен учитывать все эти классы при рендеринге вашего контейнера.

Правило с селектором идентификаторов переопределяет все остальные правила только с селекторами классов, в то время как правило с селектором классов применяется первым, поскольку оно наступает раньше других ваших классов, а некоторые стили переопределяются другими классами по мере их появления позже. в вашей таблице стилей.