Css priority issue Analysis

Four principles of css priority:

Principle 1: it is better to specify inheritance

If a style is inherited, it is never higher than the specified priority.
Example 1:
CODE:
<Style type = "text/css">
<! --
* {Font-size: 20px}
. Class3 {font-size: 12px ;}
-->
</Style>
<Span class = "class3"> How large is the font size? </Span>

Running 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 large is the font size? </Span> </p>
</Div>

Running result:. class3 {font-size: 12px ;}

Note: The following principles are based on "designation.

Principle 2: # 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 large is the font size? </Span>

Running result: # id3 {font-size: 25px ;}

Principle 3: the more specific, the more powerful.

Explanation: the more specific the CSS selector style definition for an element, the clearer the hierarchy, and 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 large is the font size? </Span> </p>
</Div>

Running result:. class1. class2. class3 {font-size: 25px ;}

Principle 4: Tag # id> # id; tag. class>. class

We should also know the above principle. Let's look at the 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 large is the font size? </Span>
<Span class = "class3"> How large is the font size? </Span>

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

Many people may wonder why this principle 4 is not classified into Principle 1:
[Tag # ID> tag. class>. class> tag selector> wildcard? Or can we regard "tag. class" as more specific ". class" to be classified into Principle 2? I will answer your questions later. This involves the CSS parsing rules --------- these four principles also have priorities. Are they confused? Don't worry. Continue.

* Weight of the four principles

I believe many people know the four principles above. Don't think that the code in css works by knowing these four principles. Don't believe it? So you can be sure to know the following code in five seconds. Is 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 large is the font size? </Span> </p>
</Div>
For your convenience, I have removed some code.

The weights of the four principles are: Principle 1> Principle 2> Principle 3> Principle 4

Explanation:

First, follow principle 1.

The following principle is specified to start to use. If no parameter is specified, the closest definition is inherited.

Then start principle 2.

1. Comparison of the highest priority Selector
Example:
CODE:
<Style type = "text/css">
<! --
# Id3 {font-size: 18px}
. Class1. class2. class3 {font-size: 12px}/* The description does not work anymore. --- Principle 2 */
. 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 large is the font size? </Span> </p>
</Div>

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page