样式表与 jquery ui 样式冲突答案

【问题标题】：Stylesheet conflicting with jquery ui style样式表与 jquery ui 样式冲突
【发布时间】：2011-09-06 03:24:31
【问题描述】：

我有以下风格，可以按照我的意愿工作：

.container { font-family:arial; text-decoration:none; font-size:12px; }

.title {color:#707070; text-decoration:none; }
.username {color:#8DAAB8;}
.dateandtime {color:#A5A7AC;}

.container:hover .title { color: #000000; }
.container:hover .username { color: #DF821B; }
.container:hover .dateandtime { color: #3185B6; }

但由于某种原因，当我将以下样式添加到我的页面时（我需要）：

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" />

上面原始样式中的.title 类停止工作，由于某种原因它仍然是#000000。正常状态下应该是#707070，悬停时应该是#000000。

为什么在我添加外部样式表时会发生这种情况？如何在不删除外部样式表的情况下阻止这种情况发生？

只要我删除了外部样式表，.title 类就会再次开始正常工作，但页面的其余部分 jquery-ui-tabs、jquery-ui-sortables 停止正常工作。

【问题讨论】：

您需要发布您的 html 以获得答案。最好是创建一个jsfiddle.net，以便其他人可以看到和分析问题。
我很乐意这样做，但 html 是服务器端/数据库驱动的。
你不能只复制一个示例页面的来源吗？显然，外部 css 中的某些样式会覆盖您的样式，看到完整的 html 和 css 应该可以很容易地修复它
@svanelten，我已经将 json 和 html sn-ps 数据传回给 javascript，然后在页面上创建 html。所以生成的 html 从视图源中是不可见的。
好的，我明白了。好吧，您的外部样式表没有.title 的样式规则，因此某些组合会覆盖您的样式。为确保您的风格占优势，请尝试使您的规则更具体。如果您有其他元素总是包装您的 .title 元素，请将它们添加到这样的规则中：#container .something .title 以获得更具体的规则。

标签： jquery css jquery-ui jquery-ui-css-framework

【解决方案1】：

好的，我明白了。好吧，您的外部样式表没有.title 的样式规则，因此某些组合会覆盖您的样式。为确保您的风格占据优势，请尝试使您的规则更加具体。如果您有其他元素总是包装您的 .title 元素，请将它们添加到规则中，如下所示：#container .something .title 以获得更具体的规则。

【讨论】：