Css priority issue Analysis

Source: Internet
Author: User
Tags id3

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.