jQuery附加元素，类样式只能部分工作

Question

我有一个带有类的CSS文件：

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

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

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类的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规则。