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

Question

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

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

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

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

编辑

基于@Gajotres 的回答。

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

如果我打开 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

主题与斯沃琪

这是您需要了解的下一件事。 jQuery Mobile 只有 1 个主题，但有多个色板。

可以使用 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 创建的现有链。