試圖重新風格的一些元素的jQuery使用CSS

我有這個測試頁面：http://www.problemio.com/problems/problem.php?problem_id=305 試圖重新風格的一些元素的jQuery使用CSS

您看到關於下來在頁面上半路上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; 
}

但沒有發生變化。我不確定這是否是這樣做的方式。我如何使用標籤重新設置黑色條的背景條顏色？我怎樣才能改變它上面的文字顏色？

謝謝！

來源

2012-02-13 GeekedOut

由於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其將要試圖找到與後跟類.ui-tabs-nav元素的CSS規則一個與類.ui-helper-reset隨後由父母帶班.ui-widget-header等該元素裏面內部的父元素......

來源

2012-02-13 16:11:06

你剛剛添加到這裏的CSS：http://www.problemio.com/main.css，但它不顯示在我的問題鏈接到的頁面上。任何想法爲什麼？ – GeekedOut 2012-02-13 16:15:33

如果你看看Firebug或其他檢查器中的元素，你會看到背景實際上是它的樣式它的問題是類'ui-widget-header'也有條紋圖像顯示，所以你看不到你的背景顏色，我更新了我的答案以刪除圖像。 – 2012-02-13 16:18:01

嘗試：

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

來源

2012-02-13 16:08:20 Donnie

這在Chrome開發工具爲我工作，但你實際上可能要拿出這樣的空間：的.ui-標籤。 ui-tabs-nav – Donnie 2012-02-13 16:11:05

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

來源

2012-02-13 16:09:22 mgraph

這是對的 - 問題是你不應該在類之間有空格。當你有多個空間介於CSS之間的類時，這意味着派生的元素，而不是具有多個類的元素。這就是說，你應該只需要一個類，也許兩個，上衣。不是所有的人。 – chipcullen 2012-02-13 16:12:39

我只是看着的螢火，改變的

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

屬性和它的工作。另外，在編輯顏色時，請嘗試使用＃而不是名稱。

來源

2012-02-13 16:10:42 Grigor

使用ui-插件頭類

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

來源

2012-02-13 16:12:00 soju

看看規則，您可以看到從.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; 
}

來源

2012-02-13 16:13:22

覆蓋此嘗試使用下面的規則，確保你將它們添加了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; 
}

來源

2012-02-13 16:18:12

試圖重新風格的一些元素的jQuery使用CSS

回答

相關問題