实施例

Question

我不是网页设计师。我想帮助一个朋友。

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

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

Answer 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就不再是问题了。

Answer 2

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

标记的CSS规则！important优先于后来的规则。

例如：

#example p {
    color: blue !important;
}

Reference

Answer 3

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

实施例

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

Answer 4

确保在jqm-css

之后加载了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);
}

使用自定义css覆盖jquery主题

4 个答案:

实施例