Question

我正在维护一个使用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，它适用以下层次结构：

element.style {
}

匹配的CSS规则
的jquery-UI-1.8.2.custom.css：52
.ui-widget输入，.ui-widget选择，.ui-widget textarea，.ui-widget按钮{
font-family：Helvetica，Arial，sans-serif;
font-size：1em;
}

style.css中：101
textarea.testscript {
   ~~font-family：“Courier New”，Courier，monospace;~~
   ~~font-size：12px;~~
  background-color：gray;
  宽度：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" >

Answer 1

只是一个特殊问题（http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html）。出于这个原因，您确实应该始终包含自定义样式 AFTER 任何框架文件。这样，覆盖样式变得更容易，更直观。

如何覆盖JQueryUI中特定元素的样式

1 个答案: