简介

Question

我是jQuery Mobile的新手，据我所知，它包含两个不同的css部分：一个用于主题，另一个用于结构。

如果您需要设置特定组件的样式，您可以利用Theme Roller（或只创建自己的主题），然后指定像data-theme="myTheme"这样的主题。相反，该结构允许管理元素的排列方式，布局等。它在所有元素之间共享。

基于此，我想知道是否有可能遵循一些规则，以正确的方式覆盖元素的结构。特别是，我的方法是找到链接到特定元素的css结构，复制它并粘贴到我的自定义css结构中。显然，通过这种方式，我可以影响不需要该自定义结构的其他元素的结构。

那么，实现这个目标的正确方法是什么？

修改

基于@ Gajotres的回答。

.custom-btn来自哪里？我认为有必要防止其他按钮使用该颜色设置样式。我错了吗？但是在你的代码片段中，该按钮没有该类。

如果我打开jQuery Mobile提供的主题css文件，我可以看到一个结构。与结构css文件中包含的内容有什么不同？

Answer 1

简介

jQuery Mobile有3个css文件。我将使用jQuery Mobile 1.3作为参考点来撰写有关此主题的文章。

CSS文件差异

第一个CSS文件，也是一个主要文件：jquery.mobile-1.3.2.min.css

它拥有jQuery Mobile结构和主题样式

第二个CSS文件只是jQuery Mobile结构文件，它包含构建页面和窗口小部件结构所需的CSS：jquery.mobile.structure-1.3.2.css

第三个只包含主题样式，可用于创建新样本：jquery.mobile.theme-1.3.2.css

主题与Swatch

这是您需要了解的下一件事。 jQuery Mobile只有一个主题，但有几个样本。

可以使用 data-theme="" 属性更改样本。不要问为什么它不被称为 data-swatch="" 。

如果您想了解有关此差异的更多信息，请查看我的其他 answer 。

CSS覆盖

首先需要的是一个可以向您展示jQuery Mobile HTML和CSS结构的工具。

对于Firefox浏览器，使用Firebug插件进行实时HTML / CSS操作。它将使您能够查看增强的页面标记，动态更改CSS（如果您想要查看在不执行更改时应用更改时会发生什么情况会更容易）并复制内部HTML结构。

Chrome也有一个firebug插件，但你应该避开它。它是一个更轻的Firefox firebug版本，同时Chrome有一个很棒的内置工具叫做“开发人员工具”。可以使用CTRL + SHIFT + I组合轻松调用它。 Macintosh用户可以使用以下组合打开它：Command + Option + i。

我的最终建议是坚持使用Chrome开发人员工具，Firebug插件因资源非常耗尽而闻名。

考虑到这一点，你需要知道另一件事。您可以在此处看到基本的jQuery Mobile页面架构：

<div data-role="page">
    <div data-role="header">
        <!-- Inner content -->
    </div>
    <div data-role="content">
        <!-- Inner content -->
    </div>
    <div data-role="footer">
        <!-- Inner content -->
    </div>
</div>

不是最终页面结果。在pagecreate事件之后（和pageinit事件之前），jQuery Mobile正在触发HTML标记增强过程。因此，最终结果或多或少会有所不同。

让我们看看jQuery Mobile按钮示例，在增强之前它看起来像这样：

<a href="#" data-role="button">Link button</a>

增强后看起来像这样：

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">Classic HTML button</span>
    </span>
    <input type="button" value="Classic HTML button" class="ui-btn-hidden" data-disabled="false"/>
</div>

这就是我们需要其他工具的原因，以便我们可以看到最终的HTML结构。

有了这个可以继续进行。

如果要覆盖jQuery Mobile CSS定义，则需要学习使用！important。虽然这通常很大，否则我们不能没有它。

假设我们想要更改按钮文字颜色（从上一个按钮示例），我们会这样做：

.custom-btn .ui-btn-inner .ui-btn-text {
    color: #013301 !important;
}

还有一件事，你可以随时更改原始的jQuery Mobile移动结构，但我建议你反对它。

如果您想了解有关此主题的更多信息，请查看我的博客 article ，我正在讨论此主题（使用jsFiddle示例）。

最后但并非最不重要

这个答案也可以在 here +工作示例中找到，为了更加透明，这是我的个人博客。

Answer 2

如果您知道css选择器优先级如何工作，您可以轻松完成。例如：

.class a {

}

要覆盖此属性，您可以使用

body .class a {}或div.class a {}。

以同样的方式，您可以覆盖使用jQuery Mobile创建的现有链。

覆盖jQuery Mobile CSS结构：一条经验法则

2 个答案:

简介

CSS文件差异

主题与Swatch

CSS覆盖

最后但并非最不重要