Javascript 覆盖 Jquery 移动 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7904899/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Override Jquery Mobile CSS
提问by jcrowson
Is it possible to override the already styled JQuery Mobile elements (buttons, lists etc) with a separate custom css file?
是否可以使用单独的自定义 css 文件覆盖已设置样式的 JQuery Mobile 元素（按钮、列表等）？
If so how would I go about referencing the elements.
如果是这样，我将如何引用元素。
Thanks
谢谢
回答by Jorge
Yes you can override all the css styles already defined in the jQuery mobile, but take a look on how to do it in a good way. Theming overviewin jQuery documentation has the information referred to your question. In particular:
是的，您可以覆盖 jQuery mobile 中已经定义的所有 css 样式，但请看一下如何以一种好的方式做到这一点。jQuery 文档中的主题概述包含与您的问题相关的信息。特别是：
Overriding themes
The themes are meant as a solid starting point, but are meant to be customized to add the custom design elements that make your site or app unique. Since everything is controlled by CSS, it's easy to use a web inspector tool to identify the style properties you want to modify. The set of of theme classes (global) and semantic structural classes (widget-specific) added to elements provide a rich set of possible selectors to target style overrides against. We recommend adding an external stylesheet to the head, placed after the structure and theme stylesheet references, that contain all your style overrides. This allows you to easily update to newer versions of the library because overrides are kept separate from the library code.
覆盖主题
这些主题旨在作为一个坚实的起点，但旨在进行自定义以添加使您的网站或应用程序独一无二的自定义设计元素。由于一切都由 CSS 控制，因此很容易使用 Web 检查器工具来识别要修改的样式属性。添加到元素的一组主题类（全局）和语义结构类（特定于小部件）提供了一组丰富的可能选择器，以针对样式覆盖进行定位。我们建议在头部添加一个外部样式表，放置在结构和主题样式表引用之后，其中包含所有样式覆盖。这使您可以轻松地更新到库的较新版本，因为覆盖与库代码是分开的。
回答by Libby
I don't know of an official, elegant way to do it, but I look in non-min css file to find classes, then add things like this to a .css file included afterthe jquery mobile one:
我不知道有一种官方的、优雅的方式来做到这一点，但我在非最小 css 文件中查找类，然后将这样的内容添加到jquery mobile之后包含的 .css 文件中：
.ui-header .ui-title {margin-right:20px;margin-left:20px;}
.ui-header .ui-title {margin-right:20px;margin-left:20px;}
.ui-footer .ui-title {margin-right:20px;margin-left:20px;white-space:normal;}
.ui-footer .ui-title {margin-right:20px;margin-left:20px;white-space:normal;}
Also, firebug and dev. tools (chrome) are your friend - examine elements and their styles.
此外，萤火虫和开发。工具 (chrome) 是您的朋友 - 检查元素及其样式。
Libby
利比
回答by Epiphany
There is a huge misconception about using your own styles with JQM that I have found everywhere, including SO. The trick to using your own CSS with JQM is in how you write your own CSS. In general, you must first specify the element you wish to overide the JQM CSS with an id, and then attach the JQM class to that ID. For example, to remove the JQM standard link border CSS from an image link, where #img_button_1 is the ID given to the anchor parent of the image, you would code your CSS like so...
关于在 JQM 中使用您自己的样式存在巨大的误解，我随处可见，包括 SO。在 JQM 中使用您自己的 CSS 的技巧在于您如何编写自己的 CSS。通常，您必须首先使用 id 指定要覆盖 JQM CSS 的元素，然后将 JQM 类附加到该 ID。例如，要从图像链接中删除 JQM 标准链接边框 CSS，其中 #img_button_1 是指定给图像父锚点的 ID，您可以像这样编写 CSS...
The HTML...
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>
Your override CSS...
您的覆盖 CSS ...
#img_button_1 .ui-btn-inner { border: 0 }
I answered this before with some working examples that can be found here
我之前用一些可以在这里找到的工作示例回答了这个问题
Jquery Mobile - Using image as link - Blue line below image
Jquery Mobile - 使用图片作为链接 - 图片下方的蓝线
You can use the same technique for resolving all your JQM CSS conflicts. Now you can reconsider using JQM to achieve your desired results knowing how simple it is to resolve these conflicts by using CSS specicivity in your own CSS. Hope this helps!
您可以使用相同的技术来解决所有 JQM CSS 冲突。现在您可以重新考虑使用 JQM 来实现您想要的结果，因为您知道通过在您自己的 CSS 中使用 CSS 特殊性来解决这些冲突是多么简单。希望这可以帮助！
回答by Simon_Weaver
Be sure to check release notes for each new version.
请务必查看每个新版本的发行说明。
There's useful stuff about what's changes in the css hierarchy. Of course this generally gets more stable with each release, but there's probably going to be something you need to know.
关于 css 层次结构的变化，有一些有用的东西。当然，这通常会随着每个版本的发布而变得更加稳定，但是您可能需要了解一些事情。
1.4 CSS upgrade doc:http://jquerymobile.com/upgrade-guide/1.4/#override-with-custom-css
1.4 CSS 升级文档：http : //jquerymobile.com/upgrade-guide/1.4/#override-with-custom-css
