jQuery 带有 class 样式的附加元素仅部分起作用

Question

我有一个 CSS 文件 class:

.item { 
    width: 100px;
    height: 100px;
    background-color: blue;
}

在 jQuery 中，我添加了一个带有 class="item" 的新 div:

new_item = '<div id="item' + num_items + '" class="ui-widget-content item"></div>';
$('div#scene').append(new_item);

div 附加了适当的高度和宽度，但背景颜色是白色而不是 CSS 文件中指定的蓝色。

为什么附加的 div 的样式具有正确的高度和宽度而不是 background-color？

Answer 1

听起来 .item class 中的 CSS 规则的特殊性不足以覆盖元素上设置的任何现有规则。您可以尝试使选择器更具体：

#parentElement div.item { 
     width: 100px;
     height: 100px;
     background-color: blue;
}

或使用!important标志：

.item { 
     width: 100px;
     height: 100px;
     background-color: blue !important;
}

请注意，前者是迄今为止更好的做法。应不惜一切代价避免使用 !important。

Answer 2

尝试

.ui-小部件-content.item{ ....你的 css 在这里... }

因为 ui-widget-content 有一些额外的 css 规则。

jQuery appended element with class styling only partially working