3

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

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

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

4

4 回答 4

2

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

你能做的第一件事

是确保您的 css包含在jquery 之后。这将强制您的 css 样式超过 jquery，因为它们是最后包含的。并希望它有效。（请参阅定义同一类的两个 css 文件）

接下来你可以做的

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

最后你可以

将所有 css 内容（您的和 jquery 的）放在一个自定义 jquery 主题中的硬（但推荐）方式。这可能意味着大量的重新排序和重新计划，但是一旦你完成了它，jquery 应该不再有问题了。

于 2013-06-12T07:40:26.230 回答
0

确保您的 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);
}
于 2013-06-12T08:32:23.640 回答
0

!important在你的 CSS 中使用。我可以认为这些会帮助你。

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

前任：

#example p {
    color: blue !important;
}

参考

于 2013-06-12T04:37:54.553 回答
0

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

例子

#yourCustomID {
    width: 500px !important;
    background: red !important;
}
于 2013-06-12T04:38:08.040 回答