Html5 - Css styles are overriden by jquery mobile style

问题

I am using html5, css, jquery mobile to develop some application. But the html elements and css are overridden by jquery-mobile default style sheet (jquery.mobile-1.0.css).

How can i overcome this problem? I just want to use my style to my page. For example If I give bgcolor="red" in body tag, it will not work..

Please give me some suggestions....

Thanking you....

回答1:

Use CSS and if necessary mark attributes as !important.

body { background-color: #f00; }

If that doesn't work, e.g. because another selector from the jQuery Mobile CSS overrides it, use !important:

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

The precedence rules are explained here: http://www.w3.org/TR/CSS21/cascade.html#specificity - however, usually simply testing if your rule already works or if it needs !important is sufficient.

What you certainly should do is including your stylesheet after the jQuery mobile CSS. This gives equally-weighted rules in your stylesheet a higher priority even without !important.

回答2:

Instead of including your style.css at first, load that at last

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

回答3:

bgcolor="red" is not CSS but an HTML attribute.

Alter your website to load your custom CSS file after the jQuery mobile CSS. In your custom CSS file declare your styles, e.g. like:

body { background-color: #f00; }

回答4:

JQuery Mobile creates sub classes of the body style so to target the body background you need to be more specific.

Add adjustments to you CSS file which is declared after the JQM CSS file.

You can target each theme body background by using the following:

.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+) */ 
}

This targets theme a for example. That took a bit of sweat to learn.

By using this, you are able to create radial gradiented backgrounds etc which the JQM theme roller does not provide for, a good page to create the CSS for various radial gradients is microsoft page of all places: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html.

Good Luck.

来源：https://stackoverflow.com/questions/10511080/html5-css-styles-are-overriden-by-jquery-mobile-style

标签

css

html5

jquery-mobile