Javascript 覆盖Jquery移动CSS

是否可以用一个单独的定制css文件覆盖已经样式化的JQuery移动元素（按钮、列表等）

如果是这样，我将如何引用元素

---

谢谢

是的，您可以覆盖jQuery mobile中已经定义的所有css样式，但是请看一下如何以一种好的方式实现它。在jQuery文档中，有与您的问题相关的信息。特别是：

覆盖主题

这些主题是作为一个坚实的起点，但也意味着 自定义以添加自定义设计元素，使您的网站或 应用程序独特。因为一切都是由CSS控制的，所以使用 web inspector工具，用于标识要修改的样式特性 修改主题类集（全局）和语义结构 添加到元素中的类（特定于小部件）提供了一组丰富的 可能的选择器以样式替代为目标我们推荐 将外部样式表添加到头部，放置在结构之后 以及包含所有样式的主题样式表引用 覆盖。这使您可以轻松地更新到的较新版本 因为重写与库代码分开保存。

---

我不知道有什么正式、优雅的方法可以做到这一点，但我会在非min css文件中查找类，然后在jquery mobile one之后的.css文件中添加类似的内容：

.ui header.ui标题{右边距：20px；左边距：20px；}

.ui footer.ui标题{右边距：20px；左边距：20px；空白：正常；}

此外，firebug和开发工具（chrome）是您的朋友-检查元素及其样式

---

Libby

关于在JQM中使用您自己的风格，我在任何地方都发现了一个巨大的误解，包括SO。将自己的CSS与JQM结合使用的诀窍在于如何编写自己的CSS。通常，您必须首先指定要使用id覆盖JQM CSS的元素，然后将JQM类附加到该id。例如，要从图像链接中删除JQM标准链接边框CSS，其中#img_button_1是给定给图像的锚定父级的id，您可以这样对CSS进行编码

HTML

<a id="img_button_1" data-role="button" data-theme="none" data-corners="false" data-shadow="false" data-inline="true"
   href="http://www.google.com" target="_blank">
    <img src="http://www.google.com/images/srpr/logo1w.png" alt="Google" />
</a>

我之前用一些可以在这里找到的工作示例回答了这个问题

---

您可以使用相同的技术来解决所有JQM CSS冲突。现在，您可以重新考虑使用JQM来实现您想要的结果，知道在您自己的CSS中使用CSS特殊性来解决这些冲突是多么简单。希望这有帮助

请务必检查每个新版本的发行说明

关于css层次结构中的变化，有一些有用的东西。当然，这通常会随着每个版本变得更加稳定，但可能有些事情你需要知道

1.4 CSS升级文档：

---

这是一个老问题。有许多复杂的答案，但有一个简单而合理的解决方案：

---

使用来自

的无主题css非常有助于人们了解。我可以看到这是一个非常好的自定义UI的工具。ThemeRoller已经转移到：-我尝试使用类方法，但即使我的css是在jquery mobile css之后加载的，它还是被覆盖了。使用id修复了这个问题。谢谢

#img_button_1 .ui-btn-inner { border: 0 }