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的元素内的父级等等......

Answer 2

尝试：

.ui-tabs .ui-tabs-nav {
    color: red;
}

Answer 3

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

Answer 4

使用ui-widget-header类

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

Answer 5

查看规则，您可以看到背景是从.ui-widget-header规则中应用的。

.ui-widget-header
 {
    background: url("images/ui-bg_diagonals-thick_8_333333_40x40.png") repeat scroll 50% 50% #333333;
    border: 1px solid #A3A3A3;
    color: #EEEEEE;
    font-weight: bold;
}

您需要使用

覆盖此内容

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

Answer 6

尝试使用以下规则，确保在jquery-ui css之后添加它们，以便覆盖它们，否则将它们写在上面的css本身上。

正常状态：

.ui-state-default, .ui-widget-content.ui-state-default, .ui-widget-header.ui-state-default{background:grey;color:red;}

悬停状态：

ui-state-hover, .ui-widget-content.ui-state-hover, .ui-widget-header.ui-state-hover, .ui-state-focus, .ui-widget-content.ui-state-focus, .ui-widget-header.ui-state-focus { 
background:grey;color: #ffffff; 
}

Answer 7

我只是看着萤火虫并改变了

的属性

.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a

它有效。此外，在编辑颜色时，请尝试使用＃而不是名称。

试图用css重新设计一些jQuery元素

7 个答案: