css - Html5 - Css 样式被 jquery 移动样式覆盖

Question

我正在使用 html5、css、jquery mobile 开发一些应用程序。但是 html 元素和 css 被 jquery-mobile 默认样式表 (jquery.mobile-1.0.css) 覆盖。

我该如何克服这个问题？我只想在我的页面上使用我的风格。例如，如果我在 body 标记中给出 bgcolor="red"，它将不起作用..

请给我一些建议......

感谢您....

Answer 1

使用 CSS 并在必要时将属性标记为!important.

body { background-color: #f00; }

如果这不起作用，例如因为 jQuery Mobile CSS 中的另一个选择器覆盖了它，请使用!important：

body { background-color: #f00 !important; }

此处解释了优先规则：http: //www.w3.org/TR/CSS21/cascade.html#specificity - 但是，通常只需测试您的规则是否已经有效或是否需要!important就足够了。

您当然应该做的是在 jQuery 移动 CSS之后包含您的样式表。即使没有!important.

Answer 2

不是首先包含你的 style.css，而是最后加载它

像

<link href="query.mobile-1.0.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">

Answer 3

bgcolor="red"不是 CSS 而是 HTML 属性。

更改您的网站以在 jQuery 移动 CSS 之后加载您的自定义 CSS 文件。在您的自定义 CSS 文件中声明您的样式，例如：

body { background-color: #f00; }

Answer 4

JQuery Mobile 会创建 body 样式的子类，因此要针对 body 背景，您需要更加具体。

向您的 CSS 文件添加调整，该文件在 JQM CSS 文件之后声明。

您可以使用以下方法定位每个主题主体背景：

.ui-body-a,
.ui-overlay-a {
/* green 4FFF19 ellipse */
    background-image: -webkit-gradient(radial, center center, 0, center center,     497, color-stop(0, #4FFF19), color-stop(1, #264C73));
    /* Webkit (Chrome 11+) */ 
}

例如，这以主题 a 为目标。这需要一点汗水来学习。

通过使用它，您可以创建 JQM 主题滚轮不提供的径向渐变背景等，为各种径向渐变创建 CSS 的好页面是所有地方的微软页面：http: //ie.microsoft.com /testdrive/graphics/cssgradientbackgroundmaker/default.html。

祝你好运。