在 jQuery 移动设备中导航时，来自先前文件的样式会干扰当前页面样式

Question

我正在使用 jQuery 移动设备构建应用程序。我在使用 href links 导航时遇到问题。

假设我有一堆页面中的 div 样式，然后我使用 href link 导航到另一个页面。如果第二页也有类似的结构，则前一页的样式将应用于第二页。这是一个例子：

这是我在第一页中定义的样式之一:

ul.rig li h3 
{
color: orange;
font-family: tahoma;
font-size: 1.2em;
font-weight: bold;
height: 20%;
left: 10%;
margin: 0;
position: absolute;
text-align: center;
text-shadow: 0.03em 0.03em 0.03em #000;
top: 40%;
width: 80%;
}

在我的第二页中，我有一个名称相同但属性不同的样式：

ul.rig li h3 
{
font-size: 0.9em;
margin: 0 0 5px;
}

现在，如果我从第一页导航到第二页并检查样式：

ul.rig li h3 
{
color: orange;
font-family: tahoma;
font-size: 1.2em;
font-weight: bold;
height: 20%;
left: 10%;
margin: 0;
position: absolute;
text-align: center;
text-shadow: 0.03em 0.03em 0.03em #000;
top: 40%;
width: 80%;
}
ul.rig li h3 
{
font-size: 0.9em; //this is striked out
margin: 0 0 5px;  //this is striked out
}

如您所见，同名样式已经替换了第二页中的样式。我确保样式是在 body->page 中定义的，而不是在 head 中。我做错了什么？？

Answer 1

当您导航到另一页时，第 1 页上的样式不会消失，因为列表的名称与第 1 页上的样式相同 class

font-size: 1.2em;
margin: 0;

优先于第 2 页的样式，因此您会看到

的删除线

font-size: 0.9em; 
margin: 0 0 5px;

您可以将 !important 添加到第 2 页的 CSS 中，例如

font-size: 0.9em !important; 
margin: 0 0 5px !important;

但是因为 !important 意味着（我想要这种样式而不是其他任何样式）当您导航回第 1 页时

font-size: 1.2em;
margin: 0;

由于样式中的 !important 而无法工作，因此您现在会在第 1 页上的样式中看到一个删除线（在此说明中并非 100% 确定，因为我从未在 JQM 上使用过外部页面，所以我不能确定在导航回第 1 页时第 2 页上的 CSS 是否会保留或消失，所以试试看。如果您看到样式的删除线在第 1 页和第 2 页之后，这 [!important] 就是原因）

因此，解决此问题的最简单方法是为第 2 页上的列表使用不同的 class 名称并使用不同的样式

您可以直接将 style="font-size: 0.9em !important;margin: 0 0 5px !important;" 添加到第 2 页上的每个 li 元素

然而，还有一种 Jquery 方法可以在不创建另一个 class 的情况下维护不同页面上的样式（保留第 1 页上的 css 样式。在第 2 页上你不需要用这种方法）

$( document ).on( "pagebeforeshow", "#page1", function(event) {
$(".rig li h3").css('cssText', 'font-size: 1.2em !important; margin: 0 !important;');
});

$( document ).on( "pagebeforeshow", "#page2", function(event) {
$(".rig li h3").css('cssText', 'font-size:  0.9em !important; margin: 0 0 5px !important');
});

Demo（此方法应该也适用于外部页面）

http://jsfiddle.net/oxpc6xwx/

在 jQuery 移动设备中导航时，来自先前文件的样式会干扰当前页面样式

styles from previous file interfering with current page styles when navigating in jQuery mobile

jquery

html

css

jquery-mobile