Menu
The location order of precedence is: browser default rules, external style sheet rules, embedded styles, and inline style rules. Specific rules take precedent over more general rules. Also, the rules toward the end of a style sheet take precedence over the front rules.
The following is the rule to override any Style Sheet Rule. Any inline stylesheet takes the highest priority. Therefore, it will override any rule defined in <style>... </style> tags or rules defined in an external style sheet file.
In CSS, the order in which we specify our rules matters. If a rule from the same style sheet, with the same level of specificity exists, the rule that is declared last in the CSS document will be the one that is applied.
CSS rules always prioritize from left to right, then from top to bottom.
The rules for CSS rule cascading are complex -- rather than trying to paraphrase them badly, I'll simply refer you to the spec:
http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade
In short: more specific rules override more general ones. Specificity is defined based on how many IDs, classes, and element names are involved, as well as whether the !important declaration was used. When multiple rules of the same "specificity level" exist, whichever one appears last wins.
The most specific style is applied:
div#foo {
color: blue; /* This one is applied to <div id="foo"></div> */
}
div {
color: red;
}
If all of the selectors have the same specificity, then the most recent decleration is used:
div {
color: red;
}
div {
color: blue; /* This one is applied to <div id="foo"></div> */
}
In your case, body:not([input="button"]) is more specific so its styles are used.
Order does matter. The last declared value of multiple occurrence will be taken. Please see the same one I worked out: http://jsfiddle.net/Wtk67/
<div class="test">Hello World!!</div>
<style>
.test{
color:blue;
}
.test{
color:red;
}
</style>
If you interchange the order of .test{}, then you can see the HTML takes value of the last one declared in CSS
The last loading CSS is THE MASTER, which will override all css with same css settings
Example:
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/master.css">
</head>
reset.css
h1 {
font-size: 20px;
}
master.css
h1 {
font-size: 30px;
}
The output for the h1 tag will be font-size: 30px;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With