【问题标题】：override jquery theme with custom css用自定义 css 覆盖 jquery 主题
【发布时间】：2013-06-12 04:35:12
【问题描述】：

我不是网页设计师。我正在尝试帮助一位朋友。

在构建这个站点时，我决定实现一些 jquery 来促进页面元素之间的平滑过渡。我遇到的问题是，为了让 jquery 起作用，我必须在我的代码中包含http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css，它会覆盖我的自定义 css。具体问题是它重新格式化了我的超链接中的文本，看起来很糟糕。

防止 jquery css 覆盖我的自定义 css 的最简单方法是什么？我一直在阅读有关 themeroller 的信息，但毕竟我已经完成了所有工作，即使这看起来也太复杂了。

【问题讨论】：

如果我没记错的话，让你的 CSS !important 可以解决问题。
显然简短的答案可以转换为 cmets。这是一件值得记住的好事情。
我已经将我自己的 CSS 中的所有内容都标记为 !important，但没有任何效果。
能否提供代码示例？也许是jsfiddle？
您是在您的样式表之前还是之后包含此样式表？

标签： jquery html css jquery-mobile

【解决方案1】：

正如其他答案所述，您可以简单地将 !important 添加到您肯定想要使用的任何 css 样式中（例如您的与 jquery 的）。这应该够了吧。但是当你为整个 CSS 文档完成时，这是相当乏味的。

你可以做的第一件事

是为了确保你的css 包含在 jquery 之后。这将强制您的 css 样式超过 jquery，因为它们是最后包含的。并希望它有效。（见Two css files defining same class）

接下来可以做的事情

是玩弄 jquery 的 css 表。如果您包含一个实际上是空的文件jquery.mobile-1.2.0.min.css，会发生什么？ jquery 会工作吗？如果你只是删除所有接触到你的东西的 CSS 代码怎么办？开发者工具中记录了哪些异常？

终于可以了

采用硬（但推荐）的方式将所有 css 东西（你的和 jquery 的）放在一个 custom jquery theme 中。这可能意味着大量的重新排序和重新计划，但是一旦你完成了，jquery 应该就没有问题了。

【讨论】：

所以最终起作用的是将元素 .ui-link 添加到我的 css 文件中，并在我需要的那些行之后使用 !important 。即使我的 css 是最后链接的，如果没有 !important，它仍然无法工作。我只是链接到在线 css 而不是将其复制到我的服务器 - 我不知道使用 jquery 的最佳做法是什么。网站网址：arrington-photography.com 我想将 .ui-link 添加到我的 css 是他们所说的特异性？我不是一个网页设计师。现在请我在 Exchange 服务器上配置垃圾邮件过滤，我可以做到。
添加.ui-link 看起来是正确的方法。很好，它现在可以工作了。（哦，顺便说一句：您可以接受我的回答，以便其他有相同问题的人更容易找到解决方案）
我认为这是有效的组合。最后链接我的 CSS，将 jquery 元素 id 添加到我自己的 css 中，并将其标记为重要。我非常感谢大家的帮助:)
经过几个月的“帮助朋友”，我显然是一名网页设计师。我现在可以看看这个，肯定地说这是正确的答案。我有.ui，但jquery 有.ui-link，它更具体，无论加载顺序如何。我必须通过将它添加到我自己的 CSS 来覆盖它。

【解决方案2】：

在你的 CSS 中使用 !important。我认为这些对你有帮助吗？

标记为 !important 的 CSS 规则优先于后面的规则。

例如：

#example p {
    color: blue !important;
}

Reference

【讨论】：

虽然!important 可能会起作用。但我会警告不要使用它，并且只有在所有其他尝试都失败时才使用它。使用 CSS 固有的级联和特殊性来控制您的样式。使用!important 与此流程背道而驰，如果您不小心可能会导致样式表难以管理，甚至更多!important 声明会使情况滚雪球。

【解决方案3】：

在您现有的 css 样式中添加 !important。

示例

#yourCustomID {
    width: 500px !important;
    background: red !important;
}

【讨论】：

【解决方案4】：

确保你的 css 文件是在 jqm-css 之后加载的

例如你有这个导航栏

<div data-role="navbar" id="foo1" >
    <ul>
        <li><a href="#" class="toList" data-icon="custom-settings"   data-iconshadow="false" data-transition="fade"></a></li>   
    </ul>
</div>

你可以设置它的样式

 #foo1 .ui-btn{
height:45px;
}

.ui-icon-custom-settings {
background: url(../images/custom-icon) no-repeat rgba(0, 0, 0, 0);
}

【讨论】：