JQuery 移动版 1.4.5 - ui-mini 被主题覆盖 css

Question

我正在将站点从 JQM 1.2.1 更新到 1.4.5，我似乎无法获得按钮来应用 class ui-mini 的样式以正确的顺序依赖（据我所知）。

//default JQM CSS:
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

//custom theme from ThemeRoller:
<link href="https://dev.domain.com/css/themes_145/theme_145.min.css" />

//JQuery and JQM JS:
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

尽量保持简单，只有准系统 CDN 文件和我上面的自定义主题，以及一个页面 div，里面只有一个按钮：

<div data-role="page" data-theme="a">
<a class="ui-btn ui-mini ui-icon-arrow-r ui-corner-all ui-btn-inline ui-btn-icon-left">BUTTON</a>
</div>

经检查，我发现 ui-mini class 提供的缩小字体大小和填充被自定义主题 css 覆盖，这很奇怪，因为，如果我将主题 css 移动到 JQM css 之前，主题本身将被覆盖（如我所料），但在任何其他情况下，都不会应用 ui-mini 样式。自定义主题刚从 Themeroller 下载。

我是否以某种方式滥用了自定义主题？此设置在 1.2.1 中非常有效，我没有看到该特定部分在此版本中发生了怎样的变化。

Here's a fiddle demonstrating the issue.

我在这里被难住了。有人看到我哪里错了吗？

Answer 1

好吧，我的结构完全错了。不得不回到 themeroller 上的说明并分别加载结构和图标包。

  <link rel="stylesheet" href="css/themes/my-custom-theme.css" />
  <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /> 
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

JQuery 移动版 1.4.5 - ui-mini 被主题覆盖 css

JQuery Mobile 1.4.5 - ui-mini overridden by theme css

css

jquery

css-specificity

jquery-mobile