Question

当我添加：

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"     href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

到我的<head>部分，我的背景颜色消失了。请注意，我正在尝试制作可折叠的块，并使用来自w3schools的代码来提供帮助。

<body>中的可折叠块中的内容：

<div data-role="main" class="ui-content">
        <div data-role="collapsible">
            <h2>MENU // SOUPS</h2>
            <p>Blank</p>
        </div>
        <div data-role="collapsible">
            <h2>MENU // BEEF</h2>
            <p>Blank</p>
        </div>
    </div>

我的背景颜色代码：

body {
  background-color: #dc143c;
}

Answer 1

jquery.mobile{-version}(.min).css为您的信息页添加了CSS个样式规则您可以使用更具体的选择器覆盖它们（或者同样具体，只要样式表在jquery.mobile之后加载）。

为了更好地理解CSS特异性，您可以从MDN's resource开始讨论该主题。请注意，他们还提供了更多信息的其他链接。

工作示例，（您的具体案例）：

＆＃13;

body.ui-overlay-a {
  background-color: #dc143c;
}
div.ui-page-theme-a  {
  background-color: transparent;
}

/* this removes the box-shadow from selected element, as per your comment */
div.ui-page-theme-a .ui-btn:focus {
  box-shadow: none;
}

＆＃13;

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"     href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div data-role="main" class="ui-content">
   <div data-role="collapsible">
      <h2>MENU // SOUPS</h2>
      <p>Blank</p>
   </div>
   <div data-role="collapsible">
       <h2>MENU // BEEF</h2>
       <p>Blank</p>
   </div>
</div>

＆＃13;

Answer 2

试试这个，

<style>
body {
background-color: #dc143c !important;
}
</style>

Answer 3

当使用jquery-mobile时，你的身体会收到额外的CSS类，包括 ui-overlay-a ，而你的主div包含在另一个div中，类为 ui-page-theme-一个即可。结合导入jquery-mobile默认css文件，您的样式将被更精确的规则抛弃：

/* jquery.mobile-1.4.5.min.css:3 */
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
   background-color: #f9f9f9;
   ...
}

和 .ui-overlay-a，.ui-page-theme-a，.ui-page-theme-a .ui-panel-wrapper { background-color：＃f9f9f9; ... }

修复方法是更改CSS以覆盖此规则。请参阅this snippet作为示例。

干杯

注意：要调查这些问题，最好是使用浏览器的开发人员工具。请参阅此页面，了解Chrome tools作为开始。所有浏览器都存在同样的情况。

每当我在该部分中添加特定脚本时，我都会丢失背景颜色

3 个答案: