Question

我在div中渲染“聊天气泡”时遇到问题。

当使用className作为选择器应用bubble容器的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

您的样式表中还有其他类，并且它们将在您的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选择器的规则将仅使用类选择器覆盖所有其他规则，而具有类选择器的规则首先应用，因为它首先应用于其他类之前，并且某些样式将被其他类覆盖，因为它们稍后发生在你的样式表中。

使用class vs id选择器时渲染差异

1 个答案: