Cascade Priority is:
Browser defaults < external style Sheets < internal style Sheets < inline styles
The style sheet is also:
Class Selector < class derivation Selector < ID selector < ID derivation Selector
The derivation selector was previously called the context selector, so the complete cascade priority is:
Browser default < external style sheet < external style sheet class selector < external style sheet class derivation selector < external style sheet ID selector < external style sheet ID derivation selector < internal style sheet < internal style Sheet class selector < internal style sheet class derivation Selector < internal style Sheet ID selector < internal style sheet ID derivation selector < inline style ... A total of 12 priority
Sometimes in the process of writing CSS, some restrictions always do not work, which involves the problem of CSS style coverage, as follows
| The code is as follows | Copy Code |
| #navigator { height:100%; width:200; Position:absolute; left:0; Border:solid 2 #EEE; } . current_block { Border:solid 2 #AE0; } |
|
Find some textbooks (w3schools, etc.), just say the order of the CSS is "style on the element" > "style element" > "external Style File" on the header, but there is no detail about how many of the same styles in the style file are prioritized. After testing and continuing the search, it is known that priority is arranged as follows:
1. The more accurate the element selector selection of the style sheet, the higher the style precedence.
The style specified by the ID selector > class selector specified by the style > element type selector specified by the
So in the example above, #navigator的样式优先级大于. Current_block priority, even if. Current_block is the most recent addition, it does not work.
2. For styles specified by the same type selector, the higher the precedence in the style sheet file.
Note that this is the higher precedence in the style sheet file, rather than the order in which the element class appears. For example. Class2 appears in the style sheet after. Class1:
| The code is as follows | Copy Code |
| . Class1 { Color:black; } . class2 { color:red; } |
|
When an element specifies class, it is specified in class= "Class2 Class1″, which, while Class1 is specified in the element after Class2, because Class1 is in front of class2 in the style sheet file, This is still a higher priority for class2, and the color is red, not black.
3. If you want a style to have a higher priority, you can specify it by using!important.
| The code is as follows | Copy Code |
| . Class1 { Color:black!important; } . class2 { color:red; } |
|
Solution:
The class will now use black, not red.
There are two solutions to the problem at first:
1. Take the border from the #navigator, put it in a class. block, and the. Block before the. Current_block:
| The code is as follows | Copy Code |
| #navigator { height:100%; width:200; Position:absolute; left:0; } . Block { Border:solid 2 #EEE; } . current_block { Border:solid 2 #AE0; } |
|
You need to specify class= "block" by default for the #navigator element
2. Use!important:
| The code is as follows | Copy Code |
| #navigator { height:100%; width:200; Position:absolute; left:0; Border:solid 2 #EEE; } . current_block { Border:solid 2 #AE0!important; } |
|
No other changes are required at this time to take effect. It can be seen that the second scenario is simpler.
Add an example
| The code is as follows | Copy Code |
| <title></title> |
|
Effect
In addition, if the same element is affected by the effect of no other style, its class is defined as multiple and separated by a space, in the order of precedence:
An element applies more than one class at the same time, the priority of the definition (i.e. near priority), plus the!important first!
| The code is as follows | Copy Code |
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <body> |
|
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
