Home > Developer > Web Develop
For CSS weights, many versions of the Web are now calculated like this: inline style 1000 point, ID100 point, class, Pseudo class (pseudo-classes) or attribute selector 10 point, tag element and pseudo element (pseudo-elements) 1 point Although most of the time is correct, but because the true principle is not so, in some cases there will be errors.
The CSS weights have ABCD four values, a for the inline style, b for the number of IDs in the selector, C for the class in the selector, the pseudo class, the number of property selectors, and D for the number of label elements and pseudo elements.
For specific understanding, see the example:
When the style is displayed, multiple groups are compared from a to D, and the result is not equal to the larger value; otherwise, if a is the same, compare B, if B is the same, compare C, if C is the same, compare D, if D is the same, then define the precedence.
Demo of error and correct method calculationStyle one:body header Div nav ul Li Div p a span em {color:red}
Style two:. Count {color:blue}
If you assign points to each ABCD according to the calculation method mentioned in this article, the weight value of style one is 11, the weight value of style two is 10, if the two rules are used for the same element, the element should be red and the actual result is blue.
According to the correct calculation method: The weight of Style one is (0,0,0,11), the weight of style two is (0,0,1,0), A, B is the same, the C group style two is greater than style one, so the rule of showing style two.
The big boss in the weightThe above calculations are normal, and for! Important, it is above all the rules.
The CSS2 specification stipulates that!important is used to specify individual properties in a style individually. For properties that are specified,!important specifies a weight value that is greater than the rule specified by all unused!important.
Style One: #header {color:red; font-weight:bold;}
Style two: . header {color:blue!important; font-weight:normal;}
In the above style, the font color should be red, because of the use of!important so the font color is blue, and font-weight according to the rules of using style one.
If!important is specified for the same attribute in multiple rules, the results of the CSS weight calculation are displayed in those selectors that specify the!important rule.
Example:
HTML code
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8" /> <title>Demo</title> <Linkrel= "stylesheet"type= "Text/css"href= "Style.css" /> <styletype= "Text/css">#div1{width:100px;Height:100px;Background-color:Red;Color:Blue!important; } </style></Head><Body> <DivID= "Div1"class= "Div1"style= "Height:200px;color:pink;"> <PID= "Active">Hsahuishau</P> <P>Hfduihif</P> </Div></Body></HTML>
External style sheet STYLE.CSS code
. div1 { width:300px; height:300px; Background-color:green; Color:yellow!important;}The result of the operation is:
The font color ignores the inline style pink, which is displayed as blue in blue and yellow by the weight calculation results.
Therefore, the role of!important only in the uniqueness of the withdrawal, so use!important to be cautious.
CSS Multiple stylesLooking at the above CSS priority calculations, some small partners may think that executing a style in a style sheet other styles will not be performed, in fact, the above overrides are performed when the same HTML element is more than one style definition. For styles that are not defined repeatedly, they will be executed normally.
For example, an external style sheet has three properties for the H3 selector:
h3 {color:red;text-align:left;font-size:8pt;}An internal style sheet has two properties for the H3 selector:
h3 {text-align:right;font-size:20pt;}The final H3 gets the following styles:
color:red;text-align:right;font-size:20pt;
That is, the color attribute will be inherited from the external style sheet, and the text arrangement (text-alignment) and font size (font-size) will be superseded by the rules in the inner style sheet.
Reference: http://www.cnblogs.com/mizzle/archive/2012/12/06/2804378.html
Http://www.cnblogs.com/xuyongsky1234/p/4157575.html
Http://www.runoob.com/css/css-howto.html
Reprint Please specify source: Loofah? CSS prioritization (weight detail)
CSS prioritization (weight detail)
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
