我是否可以仅为某些类的实例更改背景颜色？

Question

我使用id 标签＆amp ;;定义的两个jQuery标签实例。 tabs2

定义标签背景颜色的类称为 ui-widget-header

我可以以某种方式更改第二个标签 tabs2 的背景颜色吗？ jsfiddle

HTML                           结果             textarea的         

CSS

.ui-widget-header {
    background: url("images/ui-bg_gloss-wave_35_f6a828_500x100.png") repeat-x scroll 50% 50% #F6A828;
    border: 1px solid #E78F08;
    color: #FFFFFF;
    font-weight: bold;
}


    <div id="tabs2-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"> 
<div style="overflow:auto;height:600px" id="results"></div></div>
<div id="tabs2-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">    </div>

</div>

我试过

#tabs2 > .ui-widget-header {background-color: blue;}

和

#tabs2.ui-widget-header {background-color: blue;}

但没有工作

Answer 1

更新，适用于jQuery-UI：

仅设置背景颜色是不够的，还必须删除jQuery-UI使用的背景图像。

所以，这个：

#tabs2 {
    background-color: powderBlue;
    background-image: none;
}

产生这个：

但我猜你想要更像这样：

这需要更精细的CSS：

#tabs3 {
    background-color: powderBlue;
    background-image: none;
}
#tabs3 .ui-tabs, #tabs3 .ui-tabs-panel, 
#tabs3 .ui-tabs-selected, #tabs3 .ui-tabs-selected a {
    background-color: powderBlue;
    background-image: none;
}

See it at jsFiddle.

---

---

旧答案，对于一般性问题：

基于新粘贴的HTML，

#tabs2 ul.ui-widget-header {background-color: blue;}

应该做的伎俩。

如果没有，其中一个应该有效：

#tabs2 {background-color: blue!important;}
#tabs2 ul {background-color: blue!important;}
#tabs2 {background-color: blue;}
#tabs2 ul.ui-widget-header {background-color: blue!important;}

Answer 2

如果元素不是#tabs2的直接后代，则您发布的所有代码都不起作用。第一个原因显而易见（因为它必须是它起作用的直接后代），

而第二个是因为语法错误。

#tabs2.ui-widget-header {background-color: blue;}

而不是

#tabs2 .ui-widget-header {background-color: blue;}

（注意空格）。

此外，如果这也不起作用，您应该尝试使用!important来确保您的规则覆盖任何其他规则。

Answer 3

您需要像以下一样添加background-image: none;：

#tabsAdmin .ui-widget-header {    
  font-size: 1.1em;
  padding: 5px ; 
  background-color: #7BA4C1;     
  background-image: none;
}