未检测到jQuery移动主题

Question

我刚刚使用jquery移动主题rooler创建了这个主题 ，并将其包含在我的页面中，如下所示：

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="themename.min.css" />
    <link rel="stylesheet" href="jquery.mobile.icons.min.css" />
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>  
  <div class="container" data-role="page" data-theme="a">
  <div class="title" data-role="header">Title</div>
  <div class="box" data-role="content">
  Content
  </div>  <div class="footer" data-role="footer">
Some other content
  </div> 
    </div>
</body>
</html>

但是会显示默认主题： chrome控制台未报告任何错误。
可能是什么问题呢？

Answer 1

将你的主题，这我假设是themename.min.css低于jquery.mobile-1.4.5.min.css 。 CSS中主题的工作方式通常是通过覆盖选择器，例如类名。 如果两个样式表将样式应用于同一选择器，则最后定义的实例是所使用的实例。 当前，您正在定义主题并用jQuery主主题覆盖它。 颠倒顺序，您的问题应得到解决。 以下是最佳加载方案。

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <link rel="stylesheet" href="jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="themename.min.css" />
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

对于CSS：

1. 加载默认的jQuery Mobile主题
2. 加载jQuery Mobile图标覆盖
3. 加载您的自定义主题`thememain.min.css`

另外，将JavaScript移动到CSS文件下方是明智的。 CSS文件是并行下载的，而JavaScript文件通常一次下载并解析一次。