CSS which takes precedence, inline or the class?
My website has a stylesheet defined in the header as style.css with a selector:
.myClass {background:#000;}
Now my div loo开发者_如何学Cks like:
<div class="myClass" style="background:#fff;"> </div>
Which one has priority, the inline or the class?
The order of precedence with CSS is as follows:
- !important (this is a bit hackish though but it is the only way to override an inline style. Try to avoid using this unless really necessary). Example: p {color: blue !important; }
- Inline, such as
<p class="redText" style="color: red;">CSS is awesome</p>.In this example, the class is ignored if theredTextclass declaration has already tried to define the property ofcolor:. Other properties can still be honored though. - Internal styles - those written inside the
<head><style>section of an html page. - External stylesheet which defines styles. Your html document must have a link to this sheet in order to use it. Example, again inside the
<head>section is:<link rel="stylesheet" type="text/css" href="mystyle.css" />
Check here to brush up on the terminology: http://www.w3schools.com/css/css_syntax.asp
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number three has the highest priority:
- Browser default
- Embedded and external stylesheets. Later has precedence over earlier. There IS NOT any inherent difference between embedded and external.
- Inline style (inside an HTML element)
Source (Edit: of original incorrect information, since corrected both here and there): w3schools
W3schools explains a lot about CSS and also goes through and shows examples of most things you can do with CSS. Always a good resource if you have questions about something. (Edit: debatable, they were the source of the original wrong answer.)
The order of precedence with CSS is as follows:
- Inline, such as
<div id="orange" class="green" style="color: red;">This is red</div>.In this example, theclassis ignored if thegreenclass declaration has already tried to define the property of color.Alsoidis also ignored if it has tried to define the color. - Id Selector , such as
#orange { color: orange; } - Class Selectors , such as
.green { color: green; } - Element Selectors ,such as
div { color: black; }
Mozilla Developer Network Documentation Has Well Written Documentation on That Which Says
When multiple rules apply to a certain element, the rule chosen depends on its style specificity. Inline style (in HTML style attributes) has the highest specificity and will override any selectors, followed by ID selectors, then class selectors, and eventually element selectors.
The text color of the below will therefore be red.
div { color: black; }
#orange { color: orange; }
.green { color: green; }
<div id="orange" class="green" style="color: red;">This is red</div>Please Consult MDN for any HTML, CSS or JavaScript Knowledge, w3school does not have a very good reputation in developers community. For Further Info On This Matter Please Visit w3fools.
There is no 3.Internal or 4.External precedence. Whichever stylesheet comes last in the html page which will get the precedence. Eg.
<style></style>
<link> </link> <!-- Precedence -->
<link> </link>
<style></style> <!-- Precedence -->
加载中,请稍侯......
精彩评论