JQuery Mobile 的 CSS 文件是否是设置 Mobile Navbar 样式所必需的?

Is the CSS file for JQuery Mobile necessary for styling a Mobile Navbar?

所以我有以下代码片段,它是我从 JQuery 移动导航栏的一个演示中复制的:

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

<div data-role="footer">
        <div data-role="navbar">
            <ul>
                <li><a href="#" data-icon="grid">Summary</a></li>
                <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
                <li><a href="#" data-icon="gear">Setup</a></li>
            </ul>
        </div><!-- /navbar -->
</div><!-- /footer -->

这确实按预期工作。但是,我的问题是 css 文件我必须 link 到我的代码中,这会覆盖我的很多 style.css 文件(例如 background-color)。我的问题是,.min.css 文件是否真的是移动导航栏正常工作所必需的,或者是否有其他方式来设置它们的样式?也许可以在不同的 HTML 页面中声明此 Navbar 并在我要使用它的页面中调用它?

任何帮助。谢谢。

您可以使 style.css 选择器更具体,也可以使用 !important。

您可以使用 iframe 将导航栏放在另一个 HTML 中。

如果您的 style.css link 标记在 jquery.mobile css 之后并且它们具有相同的选择器,则后一个将覆盖前一个。

Read more about CSS Specificity