每当我在 <head> 部分我失去了背景色

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关于该主题MDN's resource开始。 请注意，他们还提供其他链接，提供更多信息。

工作示例（您的具体情况）：

 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; }

 <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>

Answer 2

尝试这个，

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

Answer 3

当使用jquery-mobile时，您的身体会收到其他CSS类，包括ui-overlay-a ，并且您的主div被包装在另一个ui类别为ui-page-theme-a的 div中。 结合导入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以覆盖此规则。 请参阅此代码段作为示例。

干杯

注意：要调查这些问题，最好的方法是使用浏览器的开发人员工具。 首先请参阅有关Chrome工具的页面。 所有浏览器都存在相同的问题。

每当我在 <head> 部分我失去了背景色

问题描述

3 个解决方案

解决方案1
1 已采纳 2017-03-02 12:35:18

解决方案2
0 2017-03-02 12:37:22

解决方案3
0 2017-03-02 12:41:47

每当我在 <head> 部分我失去了背景色

问题描述

3 个解决方案

解决方案1 1 已采纳 2017-03-02 12:35:18

解决方案2 0 2017-03-02 12:37:22

解决方案3 0 2017-03-02 12:41:47

解决方案1
1 已采纳 2017-03-02 12:35:18

解决方案2
0 2017-03-02 12:37:22

解决方案3
0 2017-03-02 12:41:47