【发布时间】：2011-11-30 00:13:16
【问题描述】：
我正在维护一个使用 JQueryUI 构建的小型内部 Web 应用程序。
我希望 textarea 使用与生成的 jquery-ui-1.8.2.custom.css 中指定的主题范围字体样式不同的字体样式。
我当然可以编辑 css 文件并全局指定 textarea 的样式，但这会使主题难以维护，因为如果使用 themeroller 编辑主题，则必须再次修补该样式。
所以我认为向本地 style.css 添加一个新类并让 textarea.testscript 覆盖全局 textarea 样式，然后在 textarea 上使用 class="testscript" 会起作用，但不是......
由于某种原因，JQueryUI 在类应用样式之上添加了默认样式，根据 chrome 中的 DOM Inspector 其适用的以下层次结构：
元素样式 {
}
匹配的 CSS 规则
jquery-ui-1.8.2.custom.css:52
.ui-widget 输入、.ui-widget 选择、.ui-widget textarea、.ui-widget 按钮 {
字体系列：Helvetica、Arial、无衬线字体；
字体大小：1em；
}
style.css:101
textarea.testscript {font-family: "Courier New", Courier, monospace;font-size: 12px;
背景颜色：灰色；
宽度：100%；
高度：50%；
}
在 DOM Hierarchy 中，textarea 元素上唯一活动的类是 class="testscript"，DOM 中较高的父元素具有 ui-widget 类，但我认为元素类指定的样式会覆盖从父类继承的样式，我错了吗？
编辑
修复它，更改 HTML 标头中包含样式表的顺序修复它，现在 style.css 中声明的 class="testscript" 样式优先于 jquery-ui- 中声明的 ui-widget .textarea 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" >
【问题讨论】：