jquery - 尝试使用 css 重新设置一些 jQuery 元素的样式

Question

我有这个测试页:http://www.problemio.com/problems/problem.php?problem_id=305

您看到页面中间位置有一个带有 3 个选项卡的黑条了吗？我正在尝试重新设计它的颜色。

如果你看带有FireBug的页面，会涉及到这些元素:

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">

所以我尝试将此 css 添加到我自己的 css 文件中以覆盖默认值:

.ui-tabs-nav .ui-helper-reset .ui-widget-header .ui-helper-clearfix .ui-corner-all
{
    background-color: gray;
}

但没有发生任何变化。我不确定这是否是这样做的方法。如何使用选项卡重新设置黑条的背景条颜色？我怎样才能改变上面文字的颜色？

谢谢!!

Answer 1

您的规则不起作用，因为 ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all 都是分配的不同类对于该元素，如果您想更改该元素的样式，您只需重新设置这些类之一的样式即可。

特别有背景的是ui-widget-header，所以你必须这样做:

.ui-widget-header
{
    background-image: none;
    background-color: gray;
}

通过为 .ui-tabs-nav .ui-helper-reset .ui-widget-header .ui-helper-clearfix .ui-corner-all 设置 css 规则，它将是尝试查找类 .ui-tabs-nav 的元素，后跟该类 .ui-helper-reset 类的元素，后跟该类的父元素该元素具有类 .ui-widget-header 等等...