使用自定义css覆盖jquery主题

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

在构建这个站点的过程中，我决定实现一些jquery，以促进页面元素之间的平滑转换。我遇到的问题是，为了使jquery正常工作，我必须在代码中包含jquery，这会覆盖我的自定义css。具体的问题是，它重新格式化了我的超链接中的文本，看起来很糟糕

---

防止jquery css覆盖自定义css的最简单方法是什么？我一直在读关于themeroller的书，但是在我已经做了这么多的工作之后，即使这样看起来也太复杂了。

使用

！重要信息

在css中。我想这些会对你有帮助吗

CSS规则标记！重要的优先于以后的规则

例：

---

添加

！重要信息

在您现有的css样式中

例子

---

正如其他答案所述，您只需添加

！重要信息

对于任何您明确想要使用的css样式（如您的与jquery的）。这应该能奏效。但是，如果对整个css文档执行此操作，则会非常乏味

你能做的第一件事

就是要确保你的css被包含在jquery之后。这将迫使您的css样式超过jquery，因为它们是最后包含的。希望它能起作用。（见附件）

接下来你可以做的事

就是玩弄jquery的css表。如果包含一个实际为空的文件

jquery.mobile-1.2.0.min.css

，会发生什么情况？jquery会工作吗？如果你只是删除了所有涉及你的东西的css代码呢？开发人员工具中记录了哪些异常

最后您可以

---

努力（但推荐）将所有css内容（您的和jquery的）放在一起。这可能意味着需要进行大量的重新排序和重新规划，但一旦完成了，jquery就应该不再是问题了。

确保在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>

---

如果我没记错的话，制作CSS就可以了。显然简短的答案可以转换成评论。记住这一点很好。我已经在自己的CSS中将所有内容标记为！很重要，没有效果。我们可以举一个代码的例子吗？也许是一个问题？您是在您的样式表之前还是之后包含此样式表？而

！重要提示

可能会起作用，我会警告不要使用它，只有在所有其他尝试都失败的情况下才使用它。使用CSS固有的级联和特殊性来控制样式。使用

！重要提示

与此流程背道而驰，如果您不小心，可能会导致样式表难以管理，甚至会导致更多的

！重要的

声明使情况雪球化。因此，最终有效的方法是将element.ui链接添加到我的css文件中！在我需要的那几行之后很重要。即使我的css是最后一个链接的，没有它也不能工作！重要的。我只是链接到一个在线css，而不是复制到我的服务器上——我不知道使用jquery的最佳实践是什么。站点url：我猜将.ui链接添加到我的css就是他们所说的特殊性？我不是一个网页设计师。现在让我在Exchange服务器上配置垃圾邮件过滤，我可以这样做。添加

.ui链接

看起来是正确的方法。很好，它现在起作用了。（哦，顺便说一句：你可以接受我的答案，这样其他有同样问题的人会更容易找到解决办法）我认为是这种组合起了作用。最后链接我的CSS，将jquery元素id添加到我自己的CSS中，并将其标记为重要。我非常感谢大家的帮助：）在“帮助朋友”几个月之后，我显然是一名网页设计师。我现在可以肯定地说这是正确的答案。我有

.ui

，但是jquery有

.ui链接

，它更具体，不管加载顺序如何。我必须通过将它添加到我自己的CSS来覆盖它。

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

<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);
}