2011-10-03 80 views
0

我維護使用JQueryUI構建的小型內部Web應用程序。如何覆蓋JQueryUI中特定元素的樣式

我想要一個textarea使用不同的字體樣式,然後使用生成的jquery-ui-1.8.2.custom.css中指定的全主題字體樣式。

我當然可以編輯css文件並在全局範圍內指定textarea的樣式,但這樣會很難保持主題,因爲如果使用themeroller編輯主題,那麼該樣式必須重新打補丁。

所以我認爲,增加一個新的類到本地的style.css,讓textarea.testscript覆蓋全局textarea的樣式,然後使用類=「testscript」關於textarea的將工作,但不...

出於某種原因,加上jQueryUI的在類應用的樣式的默認樣式,根據DOM查看器中的鉻以下層次結構適用:

element.style {
}

匹配CSS規則
的jquery-UI-1.8.2.custom.css:52
的.ui-插件輸入,的.ui-插件選擇,的.ui-插件textarea的,的.ui-插件按鈕{
字體家庭: Helvetica,Arial,sans-serif;
font-size:1em;
}

的style.css:101
textarea.testscript {
字體家庭: 「信使新建」,快遞,等寬;
font-size:12px;
background-color:gray;
寬度:100%;
身高:50%;
}

在DOM層次,唯一的類textarea元素上活性是類=「testscript」,父元素越往上在DOM具有UI窗口小部件類,但我認爲,通過指定的樣式元素類會覆蓋從父類中刪除的樣式,我錯了嗎?

EDIT

固定它,改變在HTML頭部中包括的樣式表的順序固定它,現在類=「testscript」中的style.css聲明樣式優先於UI窗口小部件.textarea在jquery-ui-1.8.2.custom.css中聲明。

這不起作用

<link rel="stylesheet" type="text/css" href="style.css" > 
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.2.custom.css"/> 

這工作

<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.2.custom.css"/> 
<link rel="stylesheet" type="text/css" href="style.css" > 

回答