From Baidu document: http://wenku.baidu.com/view/177b11d3240c844769eaee1a.html
Although I personally support the original tutorials in the blog Park, sometimes I would like to share with you some good articles. The following article describes the CSS priority in great detail and is of great benefit to the in-depth study of CSS, therefore, I want to help you on my blog.
I. CSS priority
1. marked "! Important Rules have the highest priority
A style rule can have a "important" label, indicating that the style rule has the highest priority. In the following example, the foreground color is marked as important.
H1 {color: black! Importan; font-family: sans-serif}
Note: such statements can cause confusion and are usually used less.
2. The priority of the Creator rule is higher than that of the browser rule.
The Browser allows the viewer to create style rules to overwrite the system default values. In this case, the webpage creator explicitly sets a higher style priority, while the viewer sets a lower style rule priority.
3. Special rules give priority to rules that are not special enough.
When determining the particularity, the ID attribute in selector has the highest priority. The priority based on ID selector can be determined by counting the number of class attributes in Selector. The higher the number, the higher the priority. If the rule still cannot determine the priority, the number of HTML element names determines the particularity.
4. at the same level, the last rule specified has priority.
If two or more rules have the same priority when the first three rules are applied, the rule given later takes precedence over the rule given earlier. If the STYLE tag (specify embedded STYLE) and LINK tag (specify link style) are used in the HEAD tag of a Web page ), if the two styles are specified with the same priority, the order of STYLE tags and LINK tags determines the STYLE priority. For example, if the next style rule is defined in the link linked sample table (mycss.css): H1 {color: red}, a rule is also defined in the embedded style definition: H1 {color: the style definition of yellow} on the webpage is as follows:
<HEAD><LINK rel=stylesheet href="mycss.css" type="text/css">
<STYLE>
H1{color:yellow}
</STYLE></HEAD>
Because the STYLE defined in the STYLE tag appears later, it has a higher priority, so the content of the H1 tag in the webpage is displayed as yellow ). Similarly, if you move the Link tag to the <STYLE> </STYLE> tag, the content of the H1 tag on the webpage will be displayed in red ). In addition, because the position of a directly inserted style (the style set by the style attribute marked with HTNL) is closest to the identifier of the style, it usually has a high priority.
Ii. 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 >#id> tag. class>. what about 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 examples:
Code:
<Style type = "text/CSS"> <! -- # ID3 {font-size: 18px }. class1. class2. class3 {font-size: 12px}/* Does not work any more. --- 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>
Running result: # id3 {font-size: 18px}
You can delete the first two rows in the CSS above. If there is no highest level # ID, you will find the. class. Even if the CSS following it is described in principle 2, you will not be able to break through principle 1.
2. If the two CSS columns have the same priority as the top selector, compare their quantity. 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"> I what is the font size? </Span> </p> </div>
Running result:. class1. class2 # id3 {font-size: 14px}
3. If the highest selection level and number are the same, compare them to the next level based on principle 2, 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 large is the font size? </Span> </p> </div>
Running result: # id1. class2. class3 {font-size: 14px}
* The highest-level selector has no superior positions. 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 large is the font size? </Span> </p> </div>
In the above example, we can find out which CSS is at the end and which one works. It indicates that their levels are the same, and the latter will overwrite the previous ones.
* If Principle 4 is classified into Principle 2, the argument is: 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 large is the font size? </Span> </p> </div>
# Id1. class2. class3 {font-size: 12px}
We can see that span # id3 is no higher than # id1.
No result start Principle 3. If the comparison result is matched with the selector starting from the highest level, and the number of levels is the same, the comparison starts to be 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 large is the font size? </Span> </p> </div>
# Id1. class2 span {font-size: 14px}
Of course, it can also be understood as "one level of style is missing" in the comparison of the two layers of the principle. The level of the missing level is not higher than that of the "more layers of style. (Tongue twisters)
* If Principle 4 is classified into principle 3, the reasons are as follows:
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 large is the font size? </Span> </p> </div>
In the above example, we can see that if Principle 4 is incorporated into principle 3, span. class3 is regarded as two layers. class2. if there are as many class3 levels, 12px should be displayed, but this is not the case.
If the final showdown Principle 4 cannot tell the result, start the comparison of Principle 4: 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 large is the font size? </Span> </p> </div>
. Class1 p. class2. class3 {font-size: 14px}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
