Discussion on CSS Priority

This article is about the CSS priority of the discussion, you can skillfully use it?

Four principles of CSS precedence:

Principle one: Inheritance is inferior to designation

If a style is inherited, it will never be as high as the specified priority.
Example 1:
CODE:
<style type= "Text/css" >
<!--
*{font-size:20px}
. class3{font-size:12px;}
-->
</style>
<span class= "CLASS3" > How big is my size? </span>

Run result:. class3{font-size:12px;

Example 2:

CODE:
<style type= "Text/css" >
<!--
#id1 #id2 {font-size:20px}
. class3{font-size:12px}
-->
</style>

<div id= "Id1" class= "Class1" >
<p id= "Id2" class= "Class2" > <span id= "id3" class= "CLASS3" > How big is my size? </span> </p>
</div>

Run result:. class3{font-size:12px;

Note: The following major principles are based on the "designation".

Principle Two: #ID > class > tag Selector

Example:
CODE:
<style type= "Text/css" >
<!--
#id3 {font-size:25px;}
. class3{font-size:18px;}
SPAN{FONT-SIZE:12PX}
-->
</style>

<span id= "ID3" class= "CLASS3" > How big is my size? </span>

Run Result: #id3 {font-size:25px;}

Principle three: The more specific the more powerful.

Explanation: The more specific the CSS selector style defined for an element, the more explicit the hierarchy, the higher the priority of the definition.
CODE:
<style type= "Text/css" >
<!--
. Class1. Class2. class3{font-size:25px;
. Class2. class3{font-size:18px}
. class3 {font-size:12px}
-->
</style>

<div class= "Class1" >
<p class= "Class2" > <span class= "CLASS3" > How big is my size? </span> </p>
</div>

Run result:. Class1. Class2. class3{font-size:25px}

Principle IV: Label #id > #id; Tags. class > class

The above principle everybody should also know, see example
CODE:
<style type= "Text/css" >
<!--
SPAN#ID3{FONT-SIZE:18PX}
#id3 {font-size:12px}
SPAN.CLASS3{FONT-SIZE:18PX}
. class3{font-size:12px}
-->
</style>
<span id= "ID3" > How big is my size? </span>
<span class= "CLASS3" > How big is my size? </span>

Run result: span#id3{font-size:18px} span.class3{font-size:18px}

Many people will have this question, why not put this principle four into the formation of the principle:
"Tags #id > #ID > tags. class >. class > tag Selector > Wildcard"? or "tag. Class" As a more specific ". Class" to be subsumed into principle two? Later I will answer your doubts, this involves the analytic law of CSS---------The four principles are also a priority, is not a bit confused? Don't worry, keep looking.

* The weight of the four principles

I believe that many people know the four principles above, do not think that know the four principles can be resolved in the CSS code is working, do not believe? So you'll be sure to know in 5 seconds the following code, the font size of the text in the test?
CODE:
<style type= "Text/css" >
<!--
. Class1 P#id2. class3{font-size:25px}
Div. Class2 span#id3{font-size:18px}
#id1. class3{font-size:14px}
. Class1 #id2. class3{font-size:12px}
#id1 #id2 {font-size:10px}
-->
</style>
<div id= "Id1" class= "Class1" >
<p id= "Id2" class= "Class2" > <span id= "id3" class= "CLASS3" > How big is my size? </span> </p>
</div>
I removed some of the code for easy reading.

The weight of the four principles is: Principle I > Principle two > Principle three > Principle Four

Explain:

First, follow principle one

There is a specified start to use the following principle, no designation is inherited from his most recent definition.

Then start with principle two

1, compare the highest priority of the selector
Example:
CODE:
<style type= "Text/css" >
<!--
#id3 {font-size:18px}
Class1. Class2 class3{font-size:12px}/* The details are not working---principle two */
. class3{font-size:18px}
div P SPAN{FONT-SIZE:12PX}
-->
</style>
<div id= "Id1" class= "Class1" >
<p id= "Id2" class= "Class2" > <span id= "id3" class= "CLASS3" > How big is my size? </span> </p>
</div>


Run Result: #id3 {font-size:18px}

Delete the first two lines of CSS above to draw, if there is no highest level of #id will look for. Class even if the following CSS in accordance with "Principle II" described in the specific can not break the principle of one.
2, if two CSS if the highest selector priority, then compare their number
Example:
CODE:
<style type= "Text/css" >
<!--
. Class1 #id3 {font-size:12px}
. Class1. Class2 #id3 {font-size:14px}
-->
</style>
<div id= "Id1" class= "Class1" >
<p id= "Id2" class= "Class2" > <span id= "id3" class= "CLASS3" > How big is my size? </span> </p>
</div>


Run result:. Class1. class2 #id3 {font-size:14px}


3, if the highest selector level and quantity are the same, then follow principle two to compare them to the next level, and so on.
Example 1:
CODE:
<style type= "Text/css" >
<!--
#id1. Class2. class3{font-size:14px}
Div. class2 #id3 {font-size:12px}
-->
</style>
<div id= "Id1" class= "Class1" >
<p id= "Id2" class= "Class2" > <span id= "id3" class= "CLASS3" > How big is my size? </span> </p>

Run result: #id1. Class2. class3{font-size:14px}


* The position of the highest-level selector is not the same as the argument:
CODE:
<style type= "Text/css" >
<!--
#id1. Class2. class3{font-size:18px}
. Class1 #id2. class3{font-size:14px}
. Class1. Class2 #id3 {font-size:12px}
-->
</style>
<div id= "Id1" class= "Class1" >
<p id= "Id2" class= "Class2" > <span id= "id3" class= "CLASS3" > How big is my size? </span> </p>
</div>

In the example above, the replacement of 3 CSS in succession can be drawn, which is at the end, which one works. Description of their level, the following will cover the front.

* The irrationality of putting principle four into Principle II demonstrates that:
CODE:
<style type= "Text/css" >
<!--
. Class1 span#id3{font-size:14px}
#id1. Class2. class3{font-size:12px}
-->
</style>
<div id= "Id1" class= "Class1" >
<p id= "Id2" class= "Class2" > <span id= "id3" class= "CLASS3" > How big is my size? </span> </p>
</div>

#id1. Class2. class3{font-size:12px}

You can see that SPAN#ID3 is no higher than the #id1 level.

No results start principle three
If you compare the results, the selectors correspond from the highest level, and the number on the levels is the same, start comparing who is more specific.
Example:
CODE:
<style type= "Text/css" >
<!--
#id1. Class2 span{font-size:14px}
. Class1 #id3 {font-size:12px}
-->
</style>
<div id= "Id1" class= "Class1" >
<p id= "Id2" class= "Class2" > <span id= "id3" class= "CLASS3" > How big is my size? </span> </p>
</div>

#id1. Class2 span{font-size:14px}

Of course, it can be understood that in the principle of the two layer of comparison "one less level of style", the lack of that level is not "more hierarchical style" of the higher level of that hierarchy. Twister

* The irrationality of principle four into principle three argues that:

CODE:
<style type= "Text/css" >
<!--
. Class2. class3{font-size:14px}
SPAN.CLASS3{FONT-SIZE:12PX}
-->
</style>
<div id= "Id1" class= "Class1" >
<p id= "Id2" class= "Class2" > <span id= "id3" class= "CLASS3" > How big is my size? </span> </p>
</div>

As can be seen in the example above, if principle IV is incorporated into Principle III and SPAN.CLASS3 is treated as two layers, then it should be as much as the. Class2. CLASS3 level, then 12px should be shown, and that is not the case.

Final Showdown principle Four
If no results are given, the comparison of principle four begins:
Example 1:
CODE:
<style type= "Text/css" >
<!--
. Class1 P.class2. class3{font-size:14px}
. Class1. Class2. class3{font-size:12px}
-->
</style>
<div id= "Id1" class= "Class1" >
<p id= "Id2" class= "Class2" > <span id= "id3" class= "CLASS3" > How big is my size? </span> </p>
</div>


. Class1 P.class2. class3{font-size:14px}